<分区>
标签 javascript jquery html css
<分区>
我需要创建一个横幅的占位符,它需要与页面一起向上滚动,直到它到达浏览器的顶部边缘,然后它应该固定在顶部。当页面向下滚动时,banner 也需要随着页面再次滚动。我不确定我是否足够清楚,所以您可以在 Watch Critic 查看示例.您会注意到右栏中的横幅行为与我所描述的一样。
我没有使用 JavaScript 的经验,所以仅使用 HTML 和 CSS 可以实现吗?
最佳答案
您需要使用 jQuery 的 scroll
事件,然后将一个新类添加到您的 header 以修复它:
jQuery
//by default, the static menu is hidden
var showStaticMenuBar = false;
//when scrolling...
$(window).scroll(function () {
//if the static menu is not yet visible...
if (showStaticMenuBar == false) {
//if I scroll more than 200px, I show it
if ($(window).scrollTop() >= 200) {
//showing the static menu
$('#header').addClass('fixed');
showStaticMenuBar = true;
}
}
//if the static menu is already visible...
else {
if ($(window).scrollTop() < 200) {
$('#header').removeClass('fixed');
//I define it as hidden
showStaticMenuBar = false;
}
}
});
CSS
#header{
display:block;
width: 100%;
height:50px;
background: #ddff00;
}
#header.fixed{
position:fixed;
top: 0; /*fixing it at the top*/
z-index: 999; /* over any other element*/
}
关于javascript - 使用 HTML 和 CSS 修复滚动页面上的横幅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17566958/
相关文章:
javascript - jQuery 将样式复制到另一个元素
javascript - 为什么单击一个按钮会影响 jQuery Ajax 中的所有按钮
javascript - 如何从 asp.net 代码隐藏函数调用 javascript 函数
javascript - 禁用 window.onbeforeunload 的用户脚本
javascript - 在 typescript 中向 javascript 对象添加属性没有错误
javascript - 具有自动滑动和按钮的自定义 jquery 图像 slider 中的 setInterval 问题