固定div仅垂直与jQuery

Question

我想修复html页面左侧的div或图像，当滚动y时，图像滚动，但是当滚动x图像不滚动或左侧时，我使用jquery.sticky-kit.js和jquery-scrolltofixed.js插件，但是当页面调整为小宽度（移动尺寸）时，滚动x即可，请注意我的页面没有响应。

另一个注意事项是，mootools插件可以很好地工作，但是我想在jquery中做到这一点。

Mootools插件在此链接中： http : //demo.rickyh.co.uk/css-position-x-and-position-y/

Answer 1

HTML：

<div id="content"></div>

CSS：

#content {
    width:50px;
    height:50px;
    background:#ccc;
    position:fixed;
    top:50px;
    left:50px;
}

jQuery的：

$(window).scroll(function () {

    var content =  $("#content");
    var windowWidth = $(window).width()

    content.css("top",-$(window).scrollTop() + 50) // 50 is initial top position

    // if the window width is smaller than 600px - scroll also x-asis
    if (windowWidth < 600) { 

        content.css("left",-$(window).scrollLeft() + 50) // 50 is initial left position

    } else  {

        content.css("left", "50px") // 50 is initial top position    

    }

});

小提琴： http : //jsfiddle.net/n4we5xma/3/

Answer 2

使用CSS 位置属性：水平固定，垂直相对

.scroll_fixed {
    position:absolute;
}

查看工作示例