CODEWITHSUNDEEP
javascriptjqueryhtmlsidebarsticky
Erik
Erik

Reputation: 45

Make a sticky sidebar?

I want to make my sidebar sticky on my webpage. Just click on a article like this one. On the right side you can see the sidebar. I want that the sidebar comes down if the user slides down and stops at #abspann. But if the user scrolls up again the sidebar should come up as well and stop at the original place.

I already tried this code which can be found here but it isn't working on my website... Can somebody help me please or tell me what I need to do?

Here the code:

<script>
    jQuery(function(){
       var sidebar = jQuery('#sidebar-wrap'),
        nav = jQuery('.sidebar-content'),
        startPosition = jQuery('#sidebar-wrap').offset().top,
        stopPosition = jQuery('#abspann').offset().top - nav.outerHeight();
        jQuery(document).scroll(function () {
            //stick nav to top of page
            var y = jQuery(this).scrollTop()

            if (y > startPosition) {
                nav.addClass('sticky');
                if (y > stopPosition) {
                    nav.css('top', stopPosition - y);
                } else {
                    nav.css('top', 0);
                }
            } else {
                nav.removeClass('sticky');
            } 
        });
    });
</script>

Upvotes: 1

Views: 924

Answers (4)

Stefdelec
Stefdelec

Reputation: 2811

No js is required. Css only : position:fixed;

https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning

https://caniuse.com/#search=fixed

Upvotes: 0

B_A_W
B_A_W

Reputation: 86

Tested this in your fiddle and seems to work a treat you just need to make a few amendments to your original code:

 var $navWrap = $('#navWrap'),
        $nav = $('nav'),
        startPosition = $navWrap.offset().top,
        stopPosition = $('#stopHere').offset().top - $nav.outerHeight();

    $(document).scroll(function () {
        //stick nav to top of page
        var scrollTop = $(this).scrollTop()

        if (scrollTop > startPosition) {
            $nav.addClass('sticky');
            if (y > stopPosition) {
                $nav.css('top', stopPosition - y);
            } else {
                $nav.css('top', 0);
            }
        } else {
            $nav.removeClass('sticky');
        } 
    });

Upvotes: 0

T.Lowly
T.Lowly

Reputation: 54

found this thing, its working detection if its up or down. the rest you can just with addclass and remove class.

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       alert("I am an alert box!");
   } else {
      alert("asfasfasfasf!");
   }
   lastScrollTop = st;
});

I did put alert boxes to check if it works quickly, so be aware of the spams :D

Upvotes: 0

Idris Dopico Pe&#241;a
Idris Dopico Pe&#241;a

Reputation: 175

You'll need to locate ur '$window' position by declaring 

var $window = $(window).scrollTop();

Then, you can check if the $window has scrolled passed the point u want, like so: 

  if (height  > 0) {
    $('.sidebar-content').addClass('sticky');
  } else {
    $('.sidebar-content').removeClass('sticky');
  }

Keep it simple!

Upvotes: 1

Related Questions