當用戶滾動經過某個 div 時如何更改 CSS

Question

我正在嘗試實現一個滾動功能，該功能根據用戶滾動的位置移動元素，此代碼到目前為止有效並且確實移動了元素。

問題是我想要一個不同函數的列表，當你根據它的 id 或 class 滾動經過某個 div 時，它會移動特定元素。

我想如果我改變了$("#pagelight2").scrollTop()它會起作用，但這並沒有幫助

任何指導將不勝感激

謝謝

更新的代碼有效，但每當我向上滾動動畫停止移動時，它真的會出現問題 - 有人知道更有效的方法來讓它工作嗎？

    var $scrollingDiv = $(".Page3-PeopleWalkingDown");

    var p = $("#pagedark3");

    var offset = p.offset();

    var top = offset.top;

    $(window).scroll(function() {

                var scrollval = $(window).scrollTop() - top;

                if ($(window).scrollTop() > 1400) {
                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": "-" + (scrollval) + "px"
                        });

                } else


                {

                    $scrollingDiv
                        .stop()
                        .animate({
                            "left": +(0) + "px"
                        });
                }

Answer 1

您需要做的是計算每個特定 DIV 相對於頁面頂部或可滾動區域的偏移高度。

然后，使用您的 .scroll() 函數，當達到偏移量（即“div”偏移量與“滾動”位置匹配）時，您可以關閉動畫。

此外，（基於稍微不同的偏移量（例如 div 偏移量 -600px），如果用戶向上滾動頁面，越過動畫，您可以“重置”動畫。盡管如此，這可能最終會讓用戶感到厭煩，並且比益處 。 。 。

偏移量： http : //api.jquery.com/offset/

滾動頂部： http : //api.jquery.com/scrolltop/

Answer 2

Skrollr允許您根據滾動條位置為任何元素的任何 CSS 屬性設置動畫（如果您知道 div 的位置/偏移量）。

例如，您可以更改 div 的背景顏色，當滾動條位於頂部時從紅色開始，當 div 頂部碰到窗口頂部時以綠色結束。

 var s = skrollr.init();

 <script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script> <div style="height: 100px"></div> <div data-0p="background-color: red;" data-100="background-color: !green;" style="height: 200px;background-color: red;" > </div>

Answer 3

我建議你檢查https://github.com/customd/jquery-visible

這是一個 jQuery 插件，它允許我們快速檢查元素是否在瀏覽器的視覺視口內，而不管滾動位置如何。 如果用戶可以看到此元素，則該函數將返回 true。 通過這種方式，您實際上可以找到用戶是否滾動了不同的元素並應用了您想要的動畫。

然后你可以使用你當前的代碼來獲取你想要的關於滾動多少等的數字。

Answer 4

我可以看到 jquery 的動畫是如何引起問題的，每次滾動動畫都會停止..我決定采取另一種方法。

請參閱此處的示例： http : //jsfiddle.net/xgmbf5ro/3/

$(window).scroll(function() {
    var offset = $(self).offset();
    var distance = parseInt(offset.top) - parseInt($(window).scrollTop());
    var l = (distance / parseInt($(self).outerHeight())) * 100;

    if (l > 0) {
        l = "0";
    }

    $(self).css("left", l+"%");
});

當我滾動頁面時，我會發現我們在我們正在設置動畫的 DOM 元素中垂直滾動了多遠。 然后我取該值並替換該元素的left屬性。 沒有更多的.animate() ，沒有更多的小故障！

我已經把它變成了一個 jQuery 插件，所以你可以像這樣將它應用到任意數量的 div： $("#myDiv").slideOut(); .

此解決方案的唯一問題是瀏覽器沒有平滑滾動。

Answer 5

我建議你使用 wow.js

https://github.com/matthieua/WOW

它非常易於使用，這里是演示頁面。 http://mynameismatthieu.com/WOW/

Answer 6

有時，當用戶在頁面上滾動時，您希望在頁面頂部顯示一個欄，當用戶向上滾動時，它應該回到其原始位置。 當您想要添加共享欄、搜索欄等並使其始終可見時，這尤其有用，即使用戶位於頁面底部。

請嘗試這樣

https://www.virendrachandak.com/techtalk/make-a-div-stick-to-top-when-scrolled-to/