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: /

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/JDE8h/3/

• javascript
• jquery
• html
• css

• 2 I'm not sure what your real issue is, but it's not a good idea to run a selector inside the scroll event, as it will query the DOM over and over when you scroll. Try something like this: jsfiddle/JDE8h/4 -- could you describe in closer detail how you would like the code to behave? – xec Commented Aug 27, 2013 at 12:30
• Thanks for the tip, I hadn't considered that before. I'd like the code to behave similarly to the sticky navigation on this site: carreraworld./us, which works very smooth and consistent. The element in my example seems to change height depending on how fast you scroll, I'm guessing because I'm scrolling faster than jQuery can calculate the correct height, and is generally unstable. Thanks for reading! – mmmoustache Commented Aug 27, 2013 at 13:21

3 Answers 3

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.

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.

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/JDE8h/9/