Tag: 滚动

视差侧边栏滚动

我只是想创建一个像http://readwrite.com/这样的视差边栏。 那有插件吗? 或者这只是这个网站的自定义视差?

获得锚点的偏移位置

我试图根据用户的选择将窗口滚动到我页面上的某个位置。 我得到了一些奇怪的结果。 任何人都可以建议一个好的/更好的方式去做这件事吗? 这是我正在使用的: var rel = $(this).attr(‘rel’); var citation = rel.split(“-“)[0]; window.scrollTo(0, $(‘[name = ‘ + citation + ‘ ]’).offset().top); alert($(‘[name = ‘ + citation + ‘ ]’).offset().top); 最后一个警报给了我一个似乎错误的数字,滚动不起作用。 当用户单击文档中的链接时,将执行以下代码。 我正在捕获该元素的rel属性值和(在一点点字符串操作之后)使用它来查找相应锚点的位置。 目标元素的name属性应与单击链接的rel属性匹配。 明白了吗? 谢谢!

用滚动更改背景图像

我有一堆图像应该适合整个浏览器,当你滚动时,它会改变到下一张图片,依此类推。 我是新手,我真的不知道自己在做什么。 我一直在看这个: 创建一个基本上是我想要的点击更改的网站背景图像 ,但不是改变点击,它将改变滚动。 不知道它是否是同一个概念……任何想法?

向下滚动到div +一定的余量

我正在使用此脚本滚动到我的页面上的某个.div: $(“.button”).click(function() { $(‘html, body’).animate({ scrollTop: $(“.scrolltothis”).offset().top }, 500); }); 完美的工作。 这会将页面滚动到“scrolltothis”div的顶部。 现在问题是:我有一个菜单栏,页面顶部有一个固定的位置。 当向下滚动时,这是一种位于页面顶部的菜单栏。 因此,当脚本向下滚动到“scrolltothis”div时,div的一部分落在菜单栏后面。 我需要的是一种告诉浏览器向下滚动到“scrolltothis div”+向下50像素的方法,以便该div在菜单栏下完全可见。 希望你们能帮助我!

JQuery拖/滚动/溢出问题

我有一个滚动:JQuery 1.4.2和JQuery 1.7.2的自动问题。 我有一个容器DIV,里面有2个DIV。 像这样: Title goes here! Content goes here! 我启用拖动组: $(‘#dragMe’).draggable({ containment: ‘#dragContain’, cursor: ‘move’, zIndex: 20000 }); 而且,当我这样做时,在FF中滚动仅适用于鼠标滚轮。 抓取滚动条会导致拖动事件并移动组。 它在IE中运行良好。 有没有办法纠正这个? 我可以只将标题栏设为抓取句柄,导致父div上的拖动吗? 谢谢!

如何使容器滚动到元素

我有一个包含大量文本的容器,我想自动滚动到该容器中的各种元素。 我可以使用jQuery为容器设置动画,以便很好地滚动一定距离,但是我在确定该距离时遇到了很多麻烦。 我看到的大多数提示建议使用.offset()。top属性来获取该距离,但在这种情况下这不起作用。 看看这个jsfiddle的例子。 注意 :小提琴的目标段落标签是容器的直接子节点,但我不想依赖它。 我希望能够为任何元素获得正确的滚动距离,无论它们有多深的嵌套。

Jquery滚动事件导致性能问题

我正在尝试使用浏览器滚动事件根据用户滚动的数量放置一个html块。 该代码有效,但它导致了巨大的性能问题,基本上迫使我的浏览器冻结。 任何有关为什么以及我能做些什么来解决这个问题的见解都将非常感激。 $(‘#content’).scroll(function () { var scroll = $(‘#content’).scrollTop(); var $controls = $(“.controls”).clone(); if (scroll > 200) { $(“.controls”).remove(); $(‘#header’).append($controls); } else { $(“.controls”).remove(); $(‘.banner’).append($controls); } });

Sticky Headers with -webkit-overflow-scrolling CSS

使用修改过的jQuery插件,我们开发了一个粘性标题滚动框,用于在本机应用程序中模仿iOS上的本机function,并使用可在所有计算机上运行的跨浏览器解决方案。 这是FIDDLE: http : //jsfiddle.net/f3y9s/1/ 一切正常,包括在iOS上。 更进一步,我想使用-webkit-overflow-scrolling:touch来实现iOS的原生平滑。 问题是,这会导致标题在滚动完成后重新定位,而不是在滚动发生时重新定位。 有没有什么办法解决这一问题。 这是FIDDLE: http : //jsfiddle.net/f3y9s/ jQuery的 $(document).ready(function($){ $.fn.stickySectionHeaders = function(options) { var settings = $.extend({ stickyClass : ‘sticky’, headlineSelector: ‘strong’}, options); return $(this).each(function() { var $this = $(this); $(this).find(‘ul:first’).bind(‘scroll.sticky’, function(e) { $(this).find(‘> li’).each(function() { var $this = $(this), top = $this.position().top, height = $this.outerHeight(), $head = $this.find(settings.headlineSelector), […]

jQuery在两个类之间滚动切换

默认情况下,我有一个红色背景颜色的导航栏。 我想要做的是当用户向下滚动超过100px以将背景更改为蓝色时,如果他回到0px将背景更改为默认状态。 我想通过在两个类之间切换来实现这一点,例如 应该是默认类,如果用户向下滚动以添加 并且如果他滚动回到再次 。 这是我的尝试: $(document).ready(function(){ $(window).scroll(function(){ if ($(window).scrollTop() > 100){ $(‘.navigation’).toggleClass( “blue”); } }); }); 但这不起作用。 这是一个jsbin 。 任何想法如何让它工作?

如何使用jquery animate滚动到元素跨浏览器

这段代码: jQuery(‘body’).animate({scrollTop: target.offset().top}, 300); 适用于Firefox,但不适用于Chrome。 这段代码: jQuery(‘html’).animate({scrollTop: target.offset().top}, 300); 适用于chrome,但不适用于Firefox。 我还没有在IE中测试过。 跨浏览器的正确方法是什么? 如果从上面的片段中不清楚,我的目标是页面上的div,我想慢慢向下滚动到它,所以他们完全按照我想要的那样做…只是不跨浏览器。