stick part in a specific range

Question

i have a container that is stick to top after a specific point. but its not enough for me. i have a footer in the page and when the screen is small the stick part is hiding under the footer. i want it to stop moving down in the footer top (to stop be fixed to 0 that point but be fixed to minus number that is the substraction between them). this is my code. what should i add for that goal? and when to call it? on resize? on ready? etc.

thanks a lot

    window.onscroll = function (event) {
        fixDiv();
    };
    function fixDiv() {
        if (getBrowserHeight().width > 1284) {
            var $div = $("#Container");
            if ($(window).scrollTop() > $div.data("top")) {
                $('#Container').css({ 'position': 'fixed', 'top': '0' });
            }
            else {
                $('#Container').css({ 'position': 'static', 'top': 'auto' });
            }
        }
    }

    $(document).ready(function () {

        $("#Container").data("top", $("#Container").offset().top); 

    });

score 0 · Answer 1 · answered Oct 22 '14 at 11:59

This should get you going. Don't mind to ask for help if somehting isn't clear.

$(document).ready(function() {

  $(window).scroll(function() {
    var footerEl = $('footer').offset().top;
    var footerTop = (footerEl - $(window).scrollTop());
    var containerHeight = $('.container').height();
    var footerHeight = $('footer').height();
    console.log('footer', footerTop);
    $('.container').removeClass('sticky');

    if (footerTop <= containerHeight) {
      $('.container').addClass('sticky');
      $('.container').css('bottom', footerHeight);
    }

  });

});

body {
  height: 1000px;
  position: relative;
}
.container {
  width: 100%;
  min-height: 300px;
  position: fixed;
  top: 0;
  background: red;
}
.sticky {
  position: absolute;
  top: auto;
}
footer {
  width: 100%;
  min-height: 500px;
  position: absolute;
  bottom: 0;
  background: black;
}

<html>

<body>
  <div class="container"></div>
  <footer></footer>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

</html>

score 0 · Answer 2 · answered Oct 22 '14 at 12:13

I've tried to make as few changes to your code as possible, but there's better ways to get around this ie. using classes, like in @mhx answer. Full JavaScript below (sorry, had to remove your getBrowserHeight() as it wasn't defined):

window.onscroll = function (event) {
    fixDiv();
};
function fixDiv() {
    var $div = $("#Container");
    var $footer = $("footer");

    if ($(window).scrollTop() >= $div.data("top") && $(window).scrollTop() < $footer.data("top") - $div.height()) {
        $('#Container').css({ 'position': 'fixed', 'top': '0' });
    } 
    else if ($footer.data("top") > $footer.data("top") - $div.height()) {
        $('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
    }
    else {
        $('#Container').css({ 'position': 'static', 'top': 'auto' });
    }
}

$(document).ready(function () {
    $("#Container").data("top", $("#Container").offset().top); 
    $("footer").data("top", $("footer").offset().top); 
});

Besides adding a top data attribute to your footer and defining $footer in the start of fixDiv(),I've added this to your initial if statement, to make sure that the scroll position, does not exceed the top of the footer minus the height of your div.

&& $(window).scrollTop() < $footer.data("top") - $div.height()

... and I've added this else if statement, in case it does exceed the top of the footer minus the height of your div

else if ($footer.data("top") > $footer.data("top") - $div.height()) {
    $('#Container').css({ 'position': 'absolute', 'top': $footer.data("top") - $div.height() });
}

Here's a fiddle: http://jsfiddle.net/ds5tptay/

stick part in a specific range

2 Answers2