滾動時增加/減少元素填充

我試圖根據頁面的滾動位置來改變元素的填充;隨着用戶向下滾動頁面，填充增加，並且當它們向上滾動時，填充減少。滾動時增加/減少元素填充

我的主要問題是滾動不是很平滑，偶爾如果我滾動到頁面的頂部太快，元素的填充是每次不同的大小。我的目標是設置最小和最大填充量，因此滾動本質上是兩種尺寸之間的轉換。任何人都可以看到我要去哪裏嗎？

這裏是我的jQuery至今：

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

而且這裏是我的jsfiddle：http://jsfiddle.net/JDE8h/3/

來源

2013-08-27 mmmoustache

我不知道你真正的問題是什麼，但它不是一個好想要在滾動事件中運行選擇器，因爲它會在滾動時反覆查詢DOM。試試像這樣：http://jsfiddle.net/JDE8h/4/ - 你能詳細描述一下你希望代碼的行爲嗎？ – xec

感謝您的提示，我以前沒有考慮過。我希望代碼的行爲與本網站上的粘性導航類似：http：//carreraworld.com/us/，其工作非常流暢且一致。我的例子中的元素似乎改變了高度，這取決於你滾動的速度，我猜測是因爲我的滾動速度快於jQuery可以計算出的正確高度，並且通常是不穩定的。謝謝閱讀！ – mmmoustache

在這裏你去：

的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(); 
});

並添加CSS transition屬性.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。

來源

2013-08-27 13:44:49

嘿Hashem，你的回答是完美的 - 感謝您的時間和幫助！ – mmmoustache

@mmmoustache不客氣:) –

我相信你已經得到了數倒退。您的計算中得到的是負數。例如：基於Carrera World website的例子

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

，我想相信這是你要找的影響嗎？

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). 
});

我也給你一個header以min-height防止其過於小的邊緣情況。

CSS

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

希望這可以幫助你！

JSFiddle example.

來源

2013-08-27 13:32:26 kunalbhat

你可能使用專門負責此任務的庫，如skrollr。它可能不值得，但如果它只是填充。

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

從0至500像素，而從0滾動到200

動畫填充這裏有一個小提琴http://jsfiddle.net/JDE8h/9/

來源

2013-08-27 13:59:43 Prinzhorn

嘿Prinzhorn，我知道這個名字 - 你的插件太棒了！我沒有想過爲此使用它，但你提出了一個很好的觀點，謝謝！ – mmmoustache

滾動時增加/減少元素填充

回答

相關問題