JQuery after scrolling

Question

I have my own sidebar on my website that needs to scroll with the user so that it is always in the view.

The code I'm using now really works fine, but there is one problem. On small screens, the side panel scrolls in front of you on the side panel, which makes it impossible to view it even when scrolling.

So, I want the sidebar to scroll from below, rather than pushing from above, so when you reach the end of the sidebar, it starts to scroll.

This is the code I'm using right now.

var documentHeight = 0;
var topPadding = 10;
$(function() {
    var offset = $("#mainright").offset();
    documentHeight = $(document).height();
    $(window).scroll(function() {
        var sideBarHeight = $("#mainright").height();
        if ($(window).scrollTop() > offset.top) {
            var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
            var maxPosition = documentHeight - (sideBarHeight);
            if (newPosition > maxPosition) {
                newPosition = maxPosition;
            }
            $("#mainright").stop().animate({
                marginTop: newPosition
            });
        } else {
            $("#mainright").stop().animate({
                marginTop: 0
            });
        };
    });
});

code>

Answer 1

, " " css absolute fixed . :

$(function(){
   var $box    = $('.box'),
       offset  = $box.offset(),
       doc_h   = $(document).height();

    $(window).scroll(function(){
        if($(window).scrollTop() > offset.top) {
            if(!$box.hasClass('fix'))
                $box.toggleClass('normal fix');
        }
        else{
            if(!$box.hasClass('normal'))
                $box.toggleClass('normal fix');
        }
    });
});​

: http://www.jsfiddle.net/YjC6y/14/

Answer 2

$(function() {
  var top = 50;
  $(window).scroll(function() {
    $('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
  });
});

: http://jsbin.com/omiyi3

Answer 3

I think you can make the sidebar responsive by throwing your function in one of the following:

if (responsive_viewport >= 768) {}

This makes the function load only if the viewport is greater than or equal to 768px.