固定div仅垂直与jQuery

Question

I want fixed an div or image in left of html page, and when scroll y, image scroll, but when scroll x image not scroll or fixed in left, I use jquery.sticky-kit.js and jquery-scrolltofixed.js plugin but when page resize to small width (mobile size) scroll x that, note that my page not responsive.

Another note that a mootools plugin is that work well, but I want do this in jquery.

Mootools plugin is in this link: 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    

    }

});

Fiddle: http://jsfiddle.net/n4we5xma/3/

Answer 2

Use CSS position property : horizontal fixed ,vertical relative

.scroll_fixed {
    position:absolute;
}

See a working example