当前位置：文江博客话题详情

使用 JavaScript / jQuery 实现滑动向下滚动效果

发布于 2024-12-24 16:05:17 字数 284 浏览 0 评论 0原文

我正在寻找有关如何重新创建此功能的一些指导。正如您所看到的，如果向下滚动，不透明度会发生变化，并且标题会随着下面的 div 出现而消失。有什么想法或教程可以帮助我吗？ http://davegamache.com/

到目前为止，我只尝试过 $(window).scroll(function (){…}); 例如，我可以向下滚动到某个触发器并弹出一个小 div。我想我现在还必须处理不透明度。有什么帮助吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯狂的代价 2024-12-31 16:05:17

您使用 $(window).scroll(function(){…}); 的想法是正确的，

您需要找出希望 div 不可见的 Y 坐标并计算div 的不透明度由此而来。大多数时候，我认为这个最大 Y 坐标应该与受影响的 div 的高度相同。假设我们的 div 高度为 500px。如果 div 在 Y 坐标 500 处的不透明度应为 0，则在 y 坐标 100 处的不透明度应为 20%（或 0.2）

工作示例：http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){
    var opacity = 1- ( $(window).scrollTop() / $('#theDiv').height());
    if (opacity>1) opacity=1;
    if (opacity<0) opacity=0;

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity);
    $('#theDiv').stop().fadeTo(250, opacity);    
});

You have the right idea using $(window).scroll(function(){…});

You'll want to figure out the Y-Coordinate at which you want the div to be invisible and calculate the opacity of the div from that. Most of the time, I'd imagine this Maximum Y-coordinate should be the same as the height of the effected div. Lets say our div is 500px in height. If the div should be at 0-opacity at Y-coordinate 500, then at y-coordinate 100 the opacity should be 20% (or .2)

Working Sample: http://jsfiddle.net/FzNrG/5/

$(window).scroll(function(){
    var opacity = 1- ( $(window).scrollTop() / $('#theDiv').height());
    if (opacity>1) opacity=1;
    if (opacity<0) opacity=0;

    //$('#debug').html('ScrollTop:' + $(window).scrollTop() + '<br>Opacity: ' + opacity);
    $('#theDiv').stop().fadeTo(250, opacity);    
});

回复收藏 0 原文

雅心素梦 2024-12-31 16:05:17

$(window).scroll(function(){…});

是一个好的开始......当你开始滚动时它会触发你想要的任何东西。例如只需放置一些 .height();在其中读取元素高度，如果它低于或高于您想要启动的某个数字，则启动 .animate();就像不透明度一样......只是玩一下。

$(window).scroll(function(){…});

is a good start... it fires whatever you want when you start a scroll. for example just put some .height(); in it to read elements height and if its below or higher of some number you want start .animate(); like the opacity... just play around a bit.

回复收藏 0 原文

鹤仙姿 2024-12-31 16:05:17

建议阅读链接页面的源代码：（评论也很好）

function slidingTitle() {
    //Get scroll position of window
    windowScroll = $(this).scrollTop();

    //Slow scroll of .art-header-inner scroll and fade it out
    $artHeaderInner.css({
       'margin-top' : -(windowScroll/3)+"px",
       'opacity' : 1-(windowScroll/550)
    });

    //Slowly parallax the background of .art-header
    $artHeader.css({
       'background-position' : 'center ' + (-windowScroll/8)+"px"
    });

   //Fade the .nav out
   $nav.css({
      'opacity' : 1-(windowScroll/400)
   });
}

would suggest to read the source code of the linked page: (it's well commented too)

function slidingTitle() {
    //Get scroll position of window
    windowScroll = $(this).scrollTop();

    //Slow scroll of .art-header-inner scroll and fade it out
    $artHeaderInner.css({
       'margin-top' : -(windowScroll/3)+"px",
       'opacity' : 1-(windowScroll/550)
    });

    //Slowly parallax the background of .art-header
    $artHeader.css({
       'background-position' : 'center ' + (-windowScroll/8)+"px"
    });

   //Fade the .nav out
   $nav.css({
      'opacity' : 1-(windowScroll/400)
   });
}

回复收藏 0 原文

~没有更多了~