- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
哎呀!
我正在尝试为我网站上的菜单添加一些效果。这是我想创建的事件:
1-用户加载页面:菜单距离页面顶部 36px ;
2-用户开始向下滚动以阅读内容;
3-当用户滚动了 36px 时,菜单移动到页面的最顶部并停留在那里;
4-用户继续向下滚动,菜单仍然固定在最顶部;
5-用户向上滚动直到到达顶部小于36px,菜单返回到第一个位置,距离顶部36px。
这很有趣,我刚刚注意到 Stack Overflow 使用一些代码来执行与我编写新问题时页面右侧的“类似问题”框完全相同的操作。如果您想了解概览,只需 start creating a new question并观看它。我试图找出他们在使用什么,但失败了。
为了达到我的效果,我使用了 scrollTop()
jQuery 属性,关联到 scroll()
一。这是代码:
$(document).scroll(function() {
if ($(document).scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
这适用于 document
,表示页面的整个主体。
现在的问题是我想在 article
中使用它具有 overflow-y :scroll
的元素属性(property)。当我谈论<article>
时元素,我指的是 HTML5 文档中使用的元素(例如 <nav>
、 <aside>
、 <section>
、 <footer>
...)。
结果,JQ在document
中没有找到任何卷轴。这是真的,因为现在整个页面中唯一的滚动条位于 article
内。元素。 body 永远不会移动,这是有意的。
所以我尝试了这个:
$('article').scroll(function() {
if ($('article').scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
还有这个:
$(document).scroll(function() {
if ($(document).scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
甚至这个:
$('#insidecontent').scroll(function() {
if ($('#insidecontent').scrollTop() >= 36) {
$('#menu').css({'top': '0px'});
} else {
$('#menu').css({'top': '36px'});
}
});
#insidecontent
是 div
的名称它遵循 article
元素,您稍后将在我将通过 Jsfiddle.net 提供给您的代码中看到。
这不起作用。不是因为article
元素,我使用另一个 jQuery 代码来动态调整高度,这也是焦点 article
没有任何问题。我尝试不用它。
http://jsfiddle.net/fKkML/1/
在这里您可以找到包含第一个版本 ( $(document)
) 和没有 overflow-y: scroll
的完整代码。 ,看看我正在谈论哪种效果。它正在工作,只需在结果框中滚动即可。
http://jsfiddle.net/BCuez/7/
这里是 overflow-y: scroll
的版本打开并 $('article')
,这不起作用。
注意:在第二个链接中,Jsfiddle.net对溢出的处理方式相同,看起来这是整个正文在滚动。但正如你所看到的,效果还是很糟糕。您可以通过创建文件在本地计算机上尝试此代码,您将会看到。
注2:我必须添加margin-top: 70px
至article
在这些演示中,但在真实的完整代码中不需要。
注3:我是 HTML5/CSS3 的“专业”用户,但不是 jQuery,这是我第一次在 Web 的帮助下编写自己的 JQ 代码。我对这个问题非常菜鸟,所以如果您能详细说明您的答案以帮助我正确理解它,我将非常感谢您。
在发布此内容之前,我已经在这里搜索了答案。例如我发现this subject与我的有点相关,但不是真的。我没有找到任何真正可以帮助我或与我的相同的。
非常感谢您给我的帮助。我愿意接受其他方法来获得相同的结果,但这个方法似乎非常接近工作。
最佳答案
我解决了这个问题。
第一个问题是 height
被设置为 auto
因为我有另一个动态改变其大小的 JS 代码。需要定义高度
(px、em、%)。
第二个问题是一开始就缺少window.onload=function(){
。 JSFiddle 自己添加的,我只需在 chrome 中用 F12 检查代码即可。我将它添加到我自己的代码中,它正在工作。
这是您可以自己在自己的代码中使用的最终代码:
jQuery:
window.onload=function(){
$('article').scroll(function () {
if ($('article').scrollTop() >= 36) {
$('#menu').css({
'top': '0px'
});
} else {
$('#menu').css({
'top': '36px'
});
}
});
}
CSS:
article {
width: 100%;
height: 500px;
overflow-y: scroll;
position: relative;
z-index: 0;
}
HTML:
<body>
<ul id="menu">
<li> <a href="#">
Elem1
</a>
</li>
<li> <a href="#">
Elem2
</a>
</li>
<li> <a href="#">
Elem3
</a>
</li>
<li> <a href="#">
Elem4
</a>
</li>
<li> <a href="#">
Elem5
</a>
</li>
</ul>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eleifend neque in sodales iaculis. Suspendisse porta sodales turpis, ut bibendum justo sagittis at. Vivamus ut laoreet tellus. Integer rutrum vel quam in imperdiet. Cras mattis lacus sem, eu suscipit urna adipiscing et. Etiam convallis, tortor ac gravida luctus, nibh tellus porttitor lorem, vel tempus massa purus sed orci. Donec condimentum dolor velit, convallis auctor velit dapibus sed. Integer commodo ullamcorper libero, in pharetra tortor auctor nec. Donec tristique turpis quis felis posuere feugiat. Fusce molestie elementum gravida. Nulla nec quam et metus gravida ornare eget ac elit. Morbi sit amet massa ornare, euismod dolor fringilla, porttitor felis. Sed mattis orci ante, nec sodales enim varius non. Proin velit justo, ultrices vel mollis id, ultrices a nibh. Aenean lacinia ullamcorper leo, sed adipiscing libero vestibulum nec. Phasellus est erat, tincidunt vel mi non, condimentum vestibulum lacus. Quisque placerat id mauris a hendrerit. Phasellus venenatis eros vel leo blandit, non blandit velit imperdiet. Praesent id erat in risus tristique iaculis a eget orci. Quisque pellentesque hendrerit ante vitae tincidunt. Vivamus placerat nisi purus, a tincidunt ligula elementum ut. Integer in arcu elit. Phasellus facilisis orci sit amet sapien egestas imperdiet. Ut quis risus sodales, rutrum libero rhoncus, tincidunt ipsum. Praesent suscipit eros id lacinia bibendum. Donec erat sem, fringilla et pulvinar nec, aliquet euismod mi.
</article>
</body>
article
是设置overflow-y:scroll
的全部内容。
#menu
是滚动时位置改变的DIV。
>= 36
是 DIV 更改位置之前用户需要滚动的像素数。
第5行0px
是滚动等于或高于36px时DIV的位置。
第9行36px
是滚动在36px以下时DIV的位置。
您可以在 jQuery 代码中添加您想要的每条 CSS 规则。例如,我添加了一行来隐藏同一事件中的某些内容。您还可以添加 animate()
事件。
祝你好运!
关于overflow - 当 DIV 溢出-y :scroll is scrolled 时,使用scrollTop() 移动 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17509201/
只是想知道 Jquery Mobile 是否足够稳定以用于实时生产企业移动应用程序。 有很多 HTML5 框架,因为我们的团队使用 JQuery 已经有一段时间了,我们更愿意使用 Jquery 移动框
关闭。这个问题需要details or clarity .它目前不接受答案。 想改进这个问题吗? 通过 editing this post 添加细节并澄清问题. 关闭 3 年前。 Improve t
所以我尝试在 JavaScript 中对元素进行拖放。我使用的视频教程在这里; https://www.youtube.com/watch?v=KTlZ4Hs5h80 。我已经按照它的说明进行了编码,
无法在移动 iOS(safari 和 chrome)上自动播放以前缓存的 mp3 音频 我正在 Angular 8 中开发一个应用程序,在该应用程序的一部分中,我试图在对象数组中缓存几个传入的音频 m
Git 基于内容而不是文件,所以我目前理解以下行为,但我想知道是否有特殊选项或 hack 来检测此类事情: git init mkdir -p foo/bar echo "test" foo/a.tx
我正在寻找语义 ui 正确的类来隐藏例如移动 View 中的 DIV。在 Bootstrap 中,我们有“visible-xs”和“hidden-xs”。 但是在语义ui上我只找到了“仅移动网格” 最
我正在使用 ubuntu 和 想要移动或复制大文件。 但是当我与其他人一起使用服务器时,我不想拥有所有内存并使其他进程几乎停止。 那么有没有办法在内存使用受限的情况下移动或复制文件? 最佳答案 如果你
这些指令有什么区别?以 ARM9 处理器为例,它不应该是: ASM: mov r0, 0 C: r0 = 0; ASM: ld r0, 0 C: r0 = 0; ? 我不知道为什么要使用一个或另一个:
我有一个文件夹,其中包含一些随机命名的文件,其中包含我需要的数据。 为了使用数据,我必须将文件移动到另一个文件夹并将文件命名为“file1.xml” 每次移动和重命名文件时,它都会替换目标文件夹中以前
我经常在 IB/Storyboard 中堆叠对象,几乎不可能拖动其他对象后面的对象而不移动前面的对象。无论如何我可以移动已经选择但位于其他对象后面的对象吗?当我尝试移动它时,它总是选择顶部的对象,还是
几个月前,我看到 Safari 7 允许推送通知,它似乎是一个非常有用的工具,除了我看到的每个示例都专注于桌面浏览,而不是移动设备。 Safari 推送通知是否可以在移动设备上运行,如果没有,是否有计
我有一个简单的 View 模型,其中包含修改后的 ObservableCollection使用 SynchronizationContext.Current.Send在 UI 线程上执行对集合的更改。
关于cassandra创建的数据文件和系统文件的位置,我需要移动在“cassandra.yaml”配置文件中设置的“commitlog_directory”、“data_file_directorie
我有这个代码 $(function() { var message = 'Dont forget us'; var original; var txt1 = ' - '; $(wind
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在 基于 Android 的浏览器 上加载时,页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
我有这个 HTML 标记: Express 300 bsf Sign Up 我需要将元素从 DOM 上的一个
我有一个可重新排序的 TableView (UITableView 实例)。尽管我已经实现了 UITableViewDataSource 方法: tableView:moveRowAtIndexPat
我的客户报告说他的网站有一个奇怪的问题。该网站的 URL 是 your-montenegro.me 在 基于 Android 的浏览器 上加载时,页面底部会出现一个奇怪的空白区域。以下是屏幕截图: 华
我需要在拖放或复制/剪切和粘贴(复制与移动)期间获取操作类型。它是一个 Swing 应用程序,并且实现了 TransferHandle。我在操作结束时需要此信息,在 importData 方法中。 对
我编写了一个具有 add 和 get 方法的 SortedIntList 类。 我调用以下四个方法: SortedIntList mySortedIntList = new SortedIntList
我是一名优秀的程序员,十分优秀!