Question

我正在尝试使用视差加载，我了解基本功能并做了一个示例。

以下代码适用于单页网站。我在这里做的是当页面滚动时我改变元素的位置。但是，当我将页面滚动到某个位置然后我们需要更改的相应部分时，假设我在页面上还有另外3,4个部分，我就会陷入困境。

我如何知道该页面已滚动到第三部分，以便我可以为该部分指定移动元素？

$(document).ready(function()
{

    $(window).scroll(function(e){
        parallax();
    });
});


function parallax(){
    var scrolled = $(window).scrollTop();

    console.log('scrolled'+scrolled+' and after multiplay='+scrolled*0.5);
    $('.group_float').css('top',-(scrolled*0.7)+'px');
    var fontSize = parseInt($(".floating_title").css("font-size"));
    fontSize = fontSize - 1+ "px";
    //$("body").css({'font-size':fontSize});
    $('.floating_title').css({'font-size':fontSize});
}

请建议。

Answer 1

检查scrollspy http://getbootstrap.com/javascript/

$('#myScrollspy').on('activate.bs.scrollspy', function () {
  // do something…
})

Answer 2

如果特定元素在视口上可见，则以下函数会根据事实返回true或false。您可以使用它来检查用户是否已滚动到特定会话

    function isOnScreen(e) {
    var win = $(window);
    var viewport = {
        top: win.scrollTop(),
        left: win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();
    var bounds = e.offset();
    bounds.right = bounds.left + e.outerWidth();
    bounds.bottom = bounds.top + e.outerHeight();
    return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom <                           bounds.top || viewport.top > bounds.bottom));
    };

根据您的要求，只使用第三个会话或第四个会话的ID或类名，看看该元素是否在屏幕上。这可以扩展到'n'个元素

      if (isOnScreen($('.thirdSessionClassName')))
                {
                   // YOUR CODE TO CHANGE SESSION //
                }
      else if (isOnScreen($('.fourthSessionClassName')))
                {
                   // YOUR CODE TO CHANGE SESSION //
                }

在视差滚动中识别窗口上可见的部分

2 个答案: