Wednesday, November 26, 2014

create div stick to top when scrolled

Standard
There are times when you would want to display a DIV bar at the top of the page when your scrolls on the page top or down  and it should go back to its original position when the user scrolls back up.
jQuery code:

/ executed when the viewr scrolls the page.
$(window).scroll(function(e) {
    // Get the position of the location where the scroller starts.
    var scroller_anchor = $(".scroller_anchor").offset().top;
     
    // Check if the user has scrolled and the current position is after the scroller start location and if its not already fixed at the top
    if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
    {    // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
        $('.scroller').css({
            'background': '#CCC',
            'border': '1px solid #000',
            'position': 'fixed',
            'top': '0px'
        });
        // Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
        $('.scroller_anchor').css('height', '50px');
    }
    else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
    {    // If the user has scrolled back to the location above the scroller anchor place it back into the content.
         
        // Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
        $('.scroller_anchor').css('height', '0px');
         
        // Change the CSS and put it back to its original position.
        $('.scroller').css({
            'background': '#FFF',
            'border': '1px solid #CCC',
            'position': 'relative'
        });
    }
});

             

      
HTML Code:
What if drugs were legal? Could you imagine what it would do to our society? Well according to John E. LeMoult, a lawyer with twenty years of experience on the subject, feels we should at least consider it. I would like to comment on his article "Legalize Drugs" in the June 15, 1984, issue of the New York Times. I disagree with LeMoult's idea of legalizing drugs to cut the cost of crime.
This is the scrollable bar
What if drugs were legal? Could you imagine what it would do to our society? Well according to John E. LeMoult, a lawyer with twenty years of experience on the subject, feels we should at least consider it. I would like to comment on his article "Legalize Drugs" in the June 15, 1984, issue of the New York Times. I disagree with LeMoult's idea of legalizing drugs to cut the cost of crime.
CSSCode:

.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;}

.scroller{background:#FFF; border:1px solid #CCC; margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}

      

0 comments:

Post a Comment