Geek asks and answers

Setting CSS Values ​​for Window Scrolling Animations

I have a map <div id = 'map'> that slides as the user scrolls. However, it seems that the map scrolls forever, never allowing the user to actually get to the bottom of the page (there is a footer).

What I'm trying to do is make <div> stop scrolling when it reaches the end of a different size with dynamic size (variable height) <div>. These two <div> s are located side by side and on the same line.

Here is the javascript code that I use to do the right move of the div using user scroll:

$(function() {

    var $sidebar   = $("#map"),
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        }
        else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
});
+5
source share
1 answer

animate() , , , jQuery . , .

if.

.

, css.

$(window).scroll(function() {
    var scrollVal = $(this).scrollTop();
    if ( scrollVal > offset.top) {
        $sidebar.css({
           'margin-top': (($window.scrollTop() - offset.top) + topPadding) + 'px'
                       //added +'px' here to prevent old internet explorer bugs
        });
    } else {
        $sidebar.css({'margin-top':'0px'});
    }
});

. if else if, else, . , .

UPDATE:

. , , html :

<div class="wrapper">
    <div class="header">header</div>
    <span id="subnav">hold this</span>
</div>​

jQuery : jsFiddle.

$(document).ready(function() {
   $(window).scroll(function() {
       var headerH = $('.header').outerHeight(true);
      //this will calculate header full height, with borders, margins, paddings
       console.log(headerH);
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > headerH ) {
        //when scroll value reach to your selector
            $('#subnav').css({'position':'fixed','top' :'0px'});
        } else {
            $('#subnav').css({'position':'static','top':'0px'});
        }
    });
 });​
+4

More articles:


All Articles