CODEWITHSUNDEEP
jqueryscrollpositioncss-position
dcolumbus
dcolumbus

Reputation: 9722

jQuery: on scroll, DIV always at the bottom right of whatever is viewable

I'm trying to determine the best way to make sure that a specific DIV is always 20px from the bottom and 20px from the right, even once a user scrolls.

<body>
<div id="wrap">
<p>Some content</p>
</div>
<div class="social-badges"><!-- this is the box that will always be at the bottom right --></div>
</body>

$(window).scroll(function() {
        console.log('scrolling');
        $(".tba-social-slider").css({"position" : "absolute", "bottom" : "20px", "right" : "20px"});
    });

Upvotes: 0

Views: 2261

Answers (2)

transparent
transparent

Reputation: 182

This code.

$(document).ready(function() {

    var div = $('.social-badges');
    var start = $(div).offset().top;

    $.event.add(window, "scroll", function() {
        var p = $(window).scrollTop() + $(window).height();
        $(div).css('position',((p)>start) ? 'fixed' : 'static');
        $(div).css('top',((p)>start) ? '5px' : '');
    });
});

That should work, but not sure. :)

Upvotes: 0

gherkins
gherkins

Reputation: 14983

CSS position fixed should do the trick:

.tba-social-slider{
  position: fixed;
  bottom: 20px;
  right: 20px;
}

No Javascript needed IMO.

Upvotes: 3

Related Questions