CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mmmoustache
mmmoustache

Reputation: 2323

Increase/decrease element padding on scroll

I'm trying to alter the padding of an element based on the scroll position of the page; as the user scrolls further down the page, the padding increases, and as they scroll back up, the padding decreases.

My main problem is that the scrolling isn't very smooth, and occasionally if I scroll to the top of the page too fast, the padding of the element is a different size each time. My goal is to set a minimum and maximum amount of padding, so the scrolling is essentially a transition between two sizes. Can anyone see where I'm going wrong?

Here's my jQuery so far:

$(window).scroll(function(){
    var h = 45;    
    if($(window).scrollTop() < 200){
        $(".header").css({
            'paddingTop': h-$(window).scrollTop() + "px",
            'paddingBottom': h-$(window).scrollTop() + "px"
        });
    }
});

And here's my jsfiddle: http://jsfiddle.net/JDE8h/3/

Upvotes: 2

Views: 10932

Answers (3)

Prinzhorn
Prinzhorn

Reputation: 22508

You could use a library dedicated to this task, such as skrollr. It may not be worth it though if it's just the padding.

<div data-0="padding:0px;" data-200="padding:500px;"></div>

Will animate the padding from 0 to 500 pixels while scrolling from 0 to 200.

Here's a fiddle http://jsfiddle.net/JDE8h/9/

Upvotes: 2

kunalbhat
kunalbhat

Reputation: 1719

I believe you've got the numbers backwards. You are getting a negative number from your calculation. For example:

if h = 45, then 45 - $scrollTop (from your active target of 20 to 200) is very quickly a negative number.

Based on the example of the Carrera World website, I think believe is the effect you are looking for?

jQuery

$(window).scroll(function(){
    var h = 45;    
    var $scrollTop = $(window).scrollTop();

    if($scrollTop < 200 && $scrollTop > 20){
        $(".header").css({
          'paddingTop': $scrollTop - h + "px"; // Subtract h from scrollTop
          'paddingBottom': $scrollTop - h + "px";
        });
    }

    $('.header').text($scrollTop); // Display scrollTop value in header (for demo).
});

I also gave your header a min-height to keep it from getting too small in edge cases.

CSS

.header {
    ...
    line-height: 40px; /** Keep things centered vertically **/
    min-height: 40px;
}

Hopefully this helps you!

JSFiddle example.

Upvotes: 2

Hashem Qolami
Hashem Qolami

Reputation: 99484

Here you go:

JavaScript:

var _window = $(window),
    header = $('.header'),
    max = 50,
    padding = parseFloat(header.css('padding-top')),
    currentPadding = padding,
    scrollPos = _window.scrollTop();

_window.scroll(function() {  

    if (scrollPos < _window.scrollTop() && currentPadding < max) {
        header.css('padding', ++currentPadding + 'px 0');
    } else if (scrollPos > _window.scrollTop() && currentPadding > padding) {
        header.css('padding', --currentPadding + 'px 0');
    }

    if (_window.scrollTop() == 0)
        header.css('padding', padding + 'px 0');

    scrollPos = _window.scrollTop();
});

And add CSS transition property to .header:

.header{
    /* other CSS declarations ...*/
    -webkit-transition: padding .3s linear;
       -moz-transition: padding .3s linear;
        -ms-transition: padding .3s linear;
         -o-transition: padding .3s linear;
            transition: padding .3s linear;
}

JSFiddle Demo.

Upvotes: 4

Related Questions