Tag: 滚动

jQuery窗口滚动事件。 滚动的每个XX像素

我正在使用优秀的jQuery Reel插件( http://jquery.vostrel.cz/reel )进行项目。 我想绑定到窗口滚动事件,所以当用户向下滚动页面时,插件前进1帧,例如每10px滚动一次,如果用户向上滚动动画则反转。 插件有方法我可以传递值没有问题,我知道如何绑定到窗口滚动事件。 我正在努力的是最后一次。 我如何使用jQuery / JavaScript来表示在任何垂直方向上滚动的每10个像素在动画中前进1帧? 我知道我可以将窗口滚动存储在一个变量中,但我不确定每次碰到10个前进一帧的倍数时该怎么说。 提前谢谢了。 编辑 感谢下面用户的帮助,我找到了一个解决方案。 如下: $(window).scroll(function() { windowScrollCount = $(this).scrollTop(); animationFrame = Math.round(windowScrollCount / 100); }); 所以这里我在windowScrollCount中获取滚动距离,将其转换为animationFrame中的帧并使用.reel(“frame”,animationFrame)将其设置回来。 我实际上是每100帧一次这样做,因为每10帧就要快。

如何判断滚动窗格在javascript中滚动的方式?

我有以下jquery来处理特定div上的滚动事件并写一些内容: $(‘#myDiv’).scroll(function(eventData) { if(eventData.isGoingUp) $(‘#myDiv’).prepend(‘Going up.’); else $(‘#myDiv’).append(‘Going down.’); }); 显然, evt.isGoingUp实际上并不存在。 有没有可以实现这种逻辑的东西?

Javascript“无限”滚动有限内容?

我有很多内容要在网站上显示,这样我就需要使用“无限”滚动解决方案,当用户滚动到当前加载内容的末尾时加载内容。 但是,我确切知道有多少数据,我希望用户对此有所了解。 我不喜欢滚动条如何使它看起来几乎到了内容的末尾,然后突然加载更多内容并且拇指/滑块位于滚动轨道的中间并且更窄。 我计划的解决方案是在当前内容很大但是空的之后制作div,然后在加载更多内容时缩小它。 还有更好的想法?

如何检查网页页面是否滚动?

有没有办法在javascript中检查网页是否已垂直滚动? 专门用于Internet Explorer? 我需要在IE中获取鼠标位置但是使用jQuery事件e.pageY它在页面未滚动时给出正确的值但是当页面向下滚动时它会给出错误的位置。

滚动时淡入新的背景图像

当用户向下滚动页面时,我正在尝试将背景图像设置为fadeIn / fadeOut。 从长远来看,我正在使用几张背景图像拍摄时间流逝效果。 我已经在滚动时改变了背景图像,但我似乎无法让它们从一个到另一个渐渐消失。 这是我到目前为止所得到的 – jsFiddle $(document).scroll(function () { if ($(this).scrollTop() > 1) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun1_web.png”)’ }); } if ($(this).scrollTop() > 250) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun2_web.png”)’ }); } if ($(this).scrollTop() > 500) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun3_web.png”)’ }); } if ($(this).scrollTop() > 750) { $(‘body’).css({ backgroundImage: ‘url(“http://sofzh.miximages.com/jquery/sun4_web.png”)’ }); } });

滚动时:如果scrollTop()等于或达到值execute事件

我正在尝试在向下滚动到某个点/值时触发事件,并在再次向上和向下滚动时再次执行。 我试过了: $(window).scroll(function(){ var sTop = $(this).scrollTop(); if(sTop == 300){ //execute event – failed } }); 上述内容不会通过鼠标滚轮和拖动滚动条来触发任何内容。 但是当我将条件更改为大于或等于时,事件正在执行,但在向下滚动时多次执行。 if(sTop >= 300){ //execute event – success } 我也试过改变条件值,有时候事件被触发了。 if(sTop == 333 /* or 431, 658, etc. */){ //execute event – sometimes success } 这是我的测试小提琴 。 如果滚动速度快, scroll()函数有时会跳过一个值吗? 有人可以解释这个问题并帮助我解决在$(window).scrollTop() == ‘value’时如何触发事件的方法。 谢谢

滚动时jquery动画延迟

我目前正在努力与jquery动画。 它只是一个小动画来改变滚动的高度和不透明度。 问题是,当我滚动时,动画不会流畅地运行。 当我滚动得很慢时,动画没有及时完成。 就像它停止直到我停止滚动。 jQuery的: $(window).scroll(function(){ if ($(window).scrollTop() > 0){ //$(‘#navigation’).addClass(‘scroll’); $(‘#navigation’).stop().animate({height: ’92px’}); $(‘#navigation .bg’).stop().animate({opacity : ‘.85’}); } else { //$(‘#navigation’).removeClass(‘scroll’); $(‘#navigation’).stop().animate({height: ‘142px’}); $(‘#navigation .bg’).stop().animate({opacity : ‘0’}); } }); CSS: #navigation { width: 1350px; position: fixed; z-index: 2000; background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.75)), […]

隐藏并显示基于另一个元素的滚动位置的固定div

我试图隐藏或显示固定的div(.featBar)。 (文件中有另一个div .featbarinline与.featbar完全相同,除了它的定位,我想要无数超过固定的.featBar) 您可以浏览网站www.documentjournal.com,了解我的目标。 (看看固定在底部的白条是如何表现的) 这是我现在的代码: var windowScroll = $(window).scrollTop(), slideHeight = $(‘.rslides1_on’).height(), windowHeight = $(window).height(), diffHeight = slideHeight – windowHeight; $(window).scroll(function() { if ( windowScroll > diffHeight ) { $(‘.featBar’).show(); } else { $(‘.featBar’).hide(); }; }); 这是我正在做的工作的链接: http://thisisaust.myshopify.com/传递:austaust 我还希望在浏览器重新resize时触发该函数。

滚动时,导航栏活动选项卡会更改颜色

我希望我的活动标签在用户滚动传递1000px时改变颜色,当它<1000px时返回原始颜色。 我已经尝试了下面的CSS工作,并永久地更改活动选项卡上的背景。 .navbar-default .navbar-nav > .active{ background: #111; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { background: #111; } 还尝试结合上面的CSS和滚动function,但我不认为我正在瞄准活动div正确… 如何在滚动function中最好地定位这个活动的tab类? 或者有更好的替代方法吗? JsFiddle: https ://jsfiddle.net/Lczsjz3y/7/ 任何帮助,将不胜感激 :)

滚动淡出

我对JQUERY比较陌生,我正朝着正确的方向寻找一个点。 如何实现滚动效果的淡入淡出? 喜欢http://fearthegrizzly.com/或http://davegamache.com 理想情况下,我希望选择将任何想要淡出的图像放入div中。 如果那是可能的。 值得一提的是,我想在Cargo Collective上实现这一点。 谢谢