Rectangle 27 0

Don't do right : 0 in your stick class. In fixed elements, the position attributes are relative to the viewport.

I tried to get rid of right: 0;, but if you do, then the sidebar scrunches into about half its' size and pushes right up to the left side of the sidebar container.. Any fix for that? Btw--I fixed the Jsfiddle so you can take a look

@PixelReaper you might need to assign your sidebar and the parent container a pixel width.

Now, how can I stop it before it falls out of the bottom? @ixe

javascript - Sidebar move after user scrolls down x amount - Stack Ove...

javascript jquery html css
Rectangle 27 0

The behaviour you would like to achieve is called 'affix'. Twitter's Bootstrap front-end framework has a javascript component that can do what you would like to get. Please check the section about the affix component. In fact, there you can also see a demonstration of the desired behaviour, the menu in the left sidebar is affixed.

You can define functions for the offset parameter of the affix init call, so it can be dynamically determined when to pin/unpin the element. To see an example in context, check the source of the above linked page, specifically look for application.js, it contains the setup of the affix that you can see on the left side. Here you can see the init code taken out of context:

// side bar
$('.bs-docs-sidenav').affix({
  offset: {
    top: function () { return $window.width() <= 980 ? 290 : 210 }
  , bottom: 270
  }
})

It is probably also worth to check in the page sources the docs.css stylesheet, which contains some positioning and styling for the affixed element. Checking this might solve your problem, or at least could give you and idea.

javascript - Sidebar that follows scroll, but scrolls self, if taller ...

javascript jquery css
Rectangle 27 0

Something like this might work. I haven't tested it but in theory it looks good.

$(function(){
    var standardPosition = $('whatYouWantToScroll').offset().top;
    // Cache the standard position of the scrolling element
    $(window).scroll(function() {
        if ($(this).scrollTop() < standardPosition) {
            // if scroll pos is higher than the top of the element
            $('whatYouWantToScroll').css({
                position: 'relative',
                top: '0px'
            });
        } else if ($(window).scrollTop() > $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())) {
            // if scroll position is lower than the top offset of the bottom reference
            // + the element that is scrolling height
            $('whatYouWantToScroll').css({
                position: 'absolute',
                top: $('somethingToReferenceOnTheBottom').offset().top-($('whatYouWantToScroll').height())
            });
        } else {
            // otherwise we're somewhere inbetween, fixed scrolling.
            $('whatYouWantToScroll').css({
                position: 'fixed'
            });
        }
    });
});

Thanks, I'll give it a shot.

javascript - Sidebar that follows scroll, but scrolls self, if taller ...

javascript jquery css
Rectangle 27 0

If your problem lies only in the scrolling, you can easily fix this with this line

overflow-x: hidden;

and applying it to the background's parent or the body element altogether.

javascript - Centered layout with the sidebar extension to the right o...

javascript html css
Rectangle 27 0

You also asked for examples; One example I encounter on a regular basis is the Facebook right column of ads. It is taller than the viewport, and scrolls past the first or second ad and stops on the third. I believe this is defined by the location of the third ad as opposed to the overall height of the sidebar, but it is a working example.

javascript - Sidebar that follows scroll, but scrolls self, if taller ...

javascript jquery css
Rectangle 27 0

The problem is just that you initializise maxY and footTop only once. They would need to change when you extend the document. You might recalculate them each time a scroll happens.

can you explain in details how do I do this?

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - How to make a floating sidebar continue floating while aj...

javascript jquery ajax sidebar sticky
Rectangle 27 0

You need to change the "position" attribute of the sidebar div from relative to absolute at a point where the top of the sidebar just touches the top end of the window. You can use a javascript event to keep a watch on the scroll bar.

javascript - Keep Bootstrap side menu in view - Stack Overflow

javascript jquery html css twitter-bootstrap
Rectangle 27 0

If you want to make the floating social bar on the left to hide when an element i.e. the footer, is visible within the viewport of the browser, you can compare the top offset of the element with the bottom position of the browser's viewport. For example,

$(document).ready(function(){

  $(document).scroll(function(){

    var footerSelector = '#wrapper-12';
    var socialBarSelector = '.pw-float-left';

    var bottomViewPort = $(window).scrollTop()+$(window).height();
    var footerTop = $(footerSelector ).offset().top;

    if( bottomViewPort>=footerTop){
      $(socialBarSelector).fadeOut();
    }else{
      $(socialBarSelector).fadeIn();
    }
  });

});

Awesome.. Thanks a lot.... Actaully I have forgot about the fadeOut and fadeIn function.

@user2361994 i believe the answer meets your needs so please mark it as accepted in order to help other visitors as well, thanks

Yes. sure, I marked it as accepted answer. Thanks again.

javascript - How can I hide or scrolling my fixed social sidebar when ...

javascript jquery css
Rectangle 27 0

I needed this exact functionality for a site, and this is what I came up with, it seems to work very nice... I know this post is old, but I assume some people may have an interest in this anyway;)

(function($){
    $(document).ready(function(){
    sidebar_offset=$('#header').height()+10;
    $(window).scroll(function(){
        var sidebar=$('#primary');
    if($(this).scrollTop()<sidebar_offset){
        var height=$(window).height()-(sidebar_offset-$(this).scrollTop());
        css={height:height,marginTop:0};
        sidebar[0].scrollTop=0;
    }else{
        css.height=$(this).height();
        if($(this).scrollTop()>sidebar_offset){
            if(this.lastTop>$(this).scrollTop()){
                sidebar[0].scrollTop=sidebar[0].scrollTop-(this.lastTop-$(this).scrollTop());
            }else{
                sidebar[0].scrollTop=sidebar[0].scrollTop+($(this).scrollTop()-this.lastTop);
            }

            css.marginTop=($(this).scrollTop()-sidebar_offset)+'px';
        }else{
            sidebar[0].scrollTop=0;
        }
     }
     sidebar.css(css);
     this.lastTop=$(this).scrollTop();
    });
})(jQuery);

javascript - Sidebar that follows scroll, but scrolls self, if taller ...

javascript jquery css
Rectangle 27 0

That's because position: fixed is excreted with float. Pobably you have to set position absolutely by JavaScript. You can use $(window).resize() to fix the zoom-in/zoom-out problem.

javascript - How to fix a sidebar on scroll? - Stack Overflow

javascript css html position
Rectangle 27 0

Check if the sidebar's height is greater then that of the content:

And I don't know why exactly, I would use top in conjunction with position: relative, but marginTop works also fine.

javascript - Keeping sidebar in viewport, problem with scrolling - Sta...

javascript jquery css viewport
Rectangle 27 0

Use css property (position:fixed). This will keep the position of the div fixed even if you scroll down or scroll up.

javascript - Scrolling layout - like facebook or google plus right sid...

javascript jquery html css
Rectangle 27 0

I had this exact idea for a project, here's a example of how to implement it

Sign up for our newsletter and get our top new questions delivered to your inbox (see an example).

javascript - Sidebar that follows scroll, but scrolls self, if taller ...

javascript jquery css