Tag: 滚动

如何滚动和动画SVG（绘图）？

我在插画家中绘制了一个SVG图像。 它类似于时间表。 当我向上和向下滚动页面时（我使用jQuery / JavaScript），我希望它能够进出。 事实上，没有JavaScript，布局是可以的（只有一件事），并且没有任何代码。 如果没有JavaScript（或没有JavaScriptfunction的用户），用户已经看到了SVG图像，只需滚动到页面底部，而不会绘制图像。 问题1 我想用JavaScript或jQuery来做这件事。 我已经研究过高低，尽管我理解了一些JavaScript和jQuery原理，但我并没有理解。 我看过Greensock的“Draw SVG”，但你必须付费才能访问该插件，我看过“snap.svg”，但似乎没有得到很好的记录，似乎不支持滚动。 在jQuery或纯JavaScript中有没有一个公平的方法呢？ 问题2 线的起点（左侧）距离边缘几个像素。 我似乎无法让它与窗户的左侧齐平。 有什么想法？ 对不起，我暂时无法发布图片 BGDR creative /* This section isfor the default overall styling for the entire site */ html { margin-top: -27px; padding: 0; } body { font-family: quicksand, didact-gothic, sans-serif; text-rendering: geometricPrecision; text-rendering: optimizeLegibility; margin:0; font-style: normal; font-weight: 300; […]

如何在JavaScript中使用媒体查询

我对JavaScript知之甚少，所以我甚至不确定我的问题是否有意义。 然而，我的观点是如何应用相同的媒体查询原则来根据屏幕的宽度更改脚本上的特定值。 在下面的示例中，我使用滚动间谍活动菜单，负滚动-100px用于页眉补偿。 这种偏移是必要的，因为标题具有固定的位置。 如果窗口小于900px宽度，我需要将偏移值更改为0px，因为在此时，标头位置变为相对。 $(document).ready(function () { $(window).scroll(function () { var y = $(this).scrollTop(); $(‘.link’).each(function (event) { if (y >= $($(this).attr(‘href’)).offset().top – 100) { $(‘.link’).not(this).removeClass(‘active’); $(this).addClass(‘active’); } }); }); }）; $(function () { $(‘a[href*=#]:not([href=#])’).click(function () { if (location.pathname.replace(/^\//, ”) == this.pathname.replace(/^\//, ”) && location.hostname == this.hostname) { var target = $(this.hash); target = target.length […]

滚动浏览固定的全屏DIV可以执行Bagigia.com上显示的动画幻灯片

是否有某种插件或框架可用于复制http://bagigia.com上的function？ 我知道我可以WGET整个来源，但需求是一些非常自定义和逆向工程的Bagigia上发现的几个JS文件似乎是一个坏主意。 或者是吗？ 这是我最好的选择吗？

在滚动Jquery上更改徽标

行？ 首先，我要感谢帮助。 好吧，我的问题如下： 我想滚动鼠标并创建背景并从顶部减少空间，也可以更改徽标。 顶部底部的问题，然后我可以做下面的代码。 但是，我不知道如何更改徽标。 HTML： CSS： .navbar-brand { text-transform: none; margin: 0px; min-width: 214px; text-indent: -9999px; height: 70px; background: url(../images/logo-telbox.png) no-repeat; } .navbar-brand-scroll { background: url(../images/logo-telbox-scroll.png) no-repeat; } JS： $(window).scroll(function () { var e = $(this).scrollTop(); e > 60 ? $(“header”).css(“background”, “#16181F”).css(“padding”, “0px 0px 10px”) : $(“header”).css(“background”, “transparent”).css(“padding”, “20px 0px 20px”); }); 谢谢 […]

将处理程序绑定到javascript滚动事件 – 性能因素

我绑定一个事件处理程序，它执行if检查以查找屏幕视口中元素的存在并调整4-5个元素的宽度。 我不确定滚动事件在javascript中是如何工作的。 但我的直觉是，即使是我们所做的1px滚动也会触发滚动事件 – 在这种情况下，一旦我们开始快速滚动，滚动听起来更像是连续事件（如果我错了，请纠正我）。 如果是这样的话，不计算视口并检查其中是否存在元素并进行dom操作会对性能造成太大影响吗？ 如果我的假设错在了，请帮助我理解滚动事件的工作原理！ 谢谢。

jQuery – 滚动侧边栏

我正在尝试创建一个随页面滚动的侧边栏。 但我希望它在用户滚动到侧边栏的顶部边框后开始滚动。 （Facebook在首页上执行此操作并向用户添加滚动）和此站点上的内容（如果您滚动到页面底部，其中一个添加内容始终跟随您） 我想知道如何实现它。 我已经尝试了以下代码片段，但这会立即开始滚动并且无法使用液体布局，因为我希望侧边栏保持在同一个位置并且只向下滚动。 $(window).scroll(function () { $(“#sidebar”).css(“position”, “fixed”).css(“top”, “50px”).css(“right”, “50px”); });​ 还有一个相关的小提琴。

搜索文档时停止浏览器自动滚动（ctrl + f）

我有一个网站，使用jquery在定义的高度/宽度框中滚动。 这很有效，直到您尝试Ctrl + F搜索。 然后，它会不规律地移动，在页面之间停止，并在幻灯片之间移动我的幻灯片。 这完全打破了它，需要重新加载才能返回function。 有没有办法禁用它？

滚动到页面底部运行function – 函数运行太多次。

我正在尝试构建一个函数，当您滚动到页面底部时，它运行一个函数来加载页面上的更多项目。 我从一个没有内容的div开始 然后我在这里发现另一个看滚动的function function isScrolledIntoView(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); console.log(docViewTop, docViewBottom, elemTop, elemBottom); return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom) && (elemBottom = docViewTop)); } $(window).scroll(function() { if(isScrolledIntoView($(‘#loadMore’))) { alert(“reached”); return false; } }); 一个问题是它似乎很快达到警报，而另一个主要问题是它多次警告“到达”屏幕 – 这显然很糟糕，因为我只希望该function运行一次…… […]

使用skrollr相对于元素，而不是窗口

所以我在网页设计方面总是新手，但我决定开始为自己展示一个展示网站： http ： //www.anikmusic.com 让我描述一下我的问题的主旨是什么： 以前，我遇到了固定定位元素在移动浏览器中跳跃和搞怪的问题，因此我决定创建一个网站，正如您所看到的，它不使用任何固定定位的元素，而是使用绝对定位的标题和适合浏览器的主体，并缩放到它的高度和宽度。 身体充当准iframe，是内容的窗口。 实际上，正是这个 包含了其中的所有真实内容，并且正是你在寻找时实际滚动的div，.content在现场。 所有部分，家庭，生物，歌曲等都在内容div中。 如果你看一下内容div中的代码，你会发现“歌曲”，“分数”和“艺术”部分都有这个叫做“媒体内容 – 颜色 – 底层”的东西。 它应该看起来像这样： 嗯，这是其中之一。 还有另外两个，它们一个位于另一个之下，因此当您滚动时，衬垫会平滑地将颜色从红色变为绿色再变为蓝色，然后在您开始滚动到艺术部分后消失。 现在，乐谱部分下面的衬垫被卡在红色，艺术品下面的那个被卡在绿色，而歌曲下的那个被卡在0不透明度。 现在这是问题所在。 通常情况下，这可以正常工作，但是对于新的布局，内容实际上在body内部的div内部，Skrollr似乎无法分辨元素何时进入视图，何时处于视图中我认为，Skrollr使用窗口作为参考框架，但我希望它使用带有class =“content”的div作为其参考框架。 我尝试将id=”skrollr-body”到上述div中，但无济于事。 关于我接下来应该做什么的任何指示或提示？

根据可拖动元素滚动div

这基本上就是我想要的：我想通过使用另一个用jquery draggable绑定的元素向上和向下滚动一个包含很长内容的div。 $(“#controller”).draggable({ revert: false, containment: “parent”, axis: “x”, create: function(){ $(this).data(“startLeft”,parseInt($(this).css(“left”))); $(this).data(“startTop”,parseInt($(this).css(“top”))); }, drag: function(event,ui){ var rel_left = ui.position.left – parseInt($(this).data(“startLeft”)); var rel_top = ui.position.top – parseInt($(this).data(“startTop”)); } }); 这是一个提供更多信息的小提琴： http ： //jsfiddle.net/xNLsE/4/