- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
这段代码运行良好:它将类 gizle 添加到标题,然后向下滚动,类 sabit 然后向上滚动(也删除 gizle)。我需要对此代码进行一些调整:删除类 sabit,然后滚动到达页面的最顶部。可能吗?
html:
<header class="top">STICKY HEADER</header>
JavaScript:
$(function(){
var cubuk_seviye = $(document).scrollTop();
var header_yuksekligi = $('.top').outerHeight();
$(window).scroll(function() {
var kaydirma_cubugu = $(document).scrollTop();
if (kaydirma_cubugu > header_yuksekligi){$('.top').addClass('gizle');}
else {$('.top').removeClass('gizle');}
if (kaydirma_cubugu > cubuk_seviye){$('.top').removeClass('sabit');}
else {$('.top').addClass('sabit');}
cubuk_seviye = $(document).scrollTop();
});
});
CSS:
.top{
background-color:#e74c3c;
color:white;
font-size:24px;
padding:5px;
text-align:center;
position: fixed;
left:0;
top:0;
width:100%;
transition: top .5s;
}
.gizle {
top: -120px;
}
.sabit {
top:0;
z-index: 9999;
}
最佳答案
这能解决您的问题吗?
$(function(){
var cubuk_seviye = $(document).scrollTop();
var header_yuksekligi = $('.top').outerHeight();
$(window).scroll(function() {
var kaydirma_cubugu = $(document).scrollTop();
if (kaydirma_cubugu > header_yuksekligi){$('.top').addClass('gizle');}
else {$('.top').removeClass('gizle');}
if (kaydirma_cubugu > cubuk_seviye){$('.top').removeClass('sabit');}
else {$('.top').addClass('sabit');}
if (kaydirma_cubugu == 0) $('.top').removeClass('sabit');
cubuk_seviye = $(document).scrollTop();
});
});
body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}
#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify}
img{float:left; margin:0 10px 10px 0;}
.top{
font-size:24px;
padding:5px;
text-align:center;
position: fixed;
left:0;
top:0;
width:100%;
transition: top .5s;
}
.gizle {
top: -120px;
}
.sabit {
background-color:#e74c3c;
color:white;
top:0;
z-index: 9999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="top">STICKY HEADER</header>
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus ante augue, ultrices semper tellus eleifend eu. Integer eu arcu risus. Nam lobortis lectus aliquam lorem accumsan, nec blandit purus ultrices. Mauris consectetur ante vitae lacinia dapibus. Cras at eleifend ligula, ut ullamcorper ipsum. Vestibulum vestibulum mollis nisi consectetur elementum. Donec vel fermentum sapien. Etiam quis purus eu ante bibendum congue. Morbi pellentesque magna ac lacinia bibendum.
</p>
<p>
Duis vel faucibus purus. Nam interdum erat at bibendum tincidunt. Integer tempor hendrerit purus, sit amet fringilla felis imperdiet tempus. Nullam a sem eget velit mattis luctus at nec metus. Integer auctor viverra nulla, sit amet blandit nulla. Duis auctor est vitae turpis tincidunt, sit amet dictum purus cursus. Mauris venenatis lectus nec magna eleifend euismod.
</p>
<img src="http://www.adobewordpress.com/ads/300x250.jpg">
<p>
Morbi varius faucibus nulla ut pharetra. Vestibulum sed sapien turpis. Sed diam felis, ullamcorper vel augue id, porta porta nibh. Mauris interdum elit ac metus fermentum, eu porttitor purus venenatis. In nec metus vitae augue mattis porta in at erat. Suspendisse potenti. Phasellus accumsan porta massa, eu scelerisque erat lacinia ac. Etiam feugiat mollis nisl, nec dignissim mauris fermentum nec. Vivamus ullamcorper tortor nec purus egestas fermentum. Etiam et imperdiet sem. Vestibulum in risus massa.
</p>
<p>
Mauris eleifend elit id purus vulputate aliquam. Suspendisse semper elit id diam malesuada sagittis. Quisque non nunc tempor, convallis felis at, placerat elit. Quisque quis nulla dapibus, vulputate diam id, dapibus sapien. Vestibulum commodo arcu at erat imperdiet ornare. Nulla vestibulum dolor sed mauris varius interdum. Quisque convallis, felis eu pharetra elementum, nisl velit consectetur nunc, eu dapibus elit ante eleifend ligula. Mauris elementum id velit ut ornare. Suspendisse a eros quis nunc sagittis tristique et id urna. Integer consequat odio quis nisl viverra gravida. Nulla interdum faucibus nunc, ac accumsan est. Duis non semper mi. Ut id semper ante, id pharetra mi. Aliquam erat volutpat. Phasellus ut magna iaculis, pretium enim quis, pellentesque dolor. Pellentesque ac dui aliquet nulla aliquam tempor quis sed dui.
</p>
<p>
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam quis ultrices ligula. Donec feugiat vitae sem et lacinia. Morbi eleifend, orci eu ornare tempor, nisl libero aliquet tortor, et varius massa dui semper ipsum. Vivamus vitae tortor lacus. Nulla tincidunt et neque ac mattis. Suspendisse lacus arcu, commodo vitae hendrerit porta, eleifend sollicitudin turpis.
</p>
<p>
Fusce tincidunt non libero et sagittis. Nunc luctus dui id sapien auctor vehicula. Quisque feugiat dui nec neque ullamcorper, eu ultricies velit vehicula. Aliquam iaculis consequat magna, vel feugiat lorem convallis sit amet. Pellentesque bibendum feugiat leo, in tristique sem vehicula quis. Nulla laoreet risus sapien, non pretium metus auctor sed. Etiam sed mattis dolor. Aenean eu tincidunt massa, et ultrices risus. Ut venenatis neque nec dui commodo tincidunt. Sed pellentesque hendrerit tortor ut fringilla. Ut ultricies tincidunt vulputate.
</p>
<p>
Nam sit amet lacus tincidunt, molestie dui dapibus, viverra diam. Donec fermentum ornare magna, in tincidunt turpis commodo in. Phasellus commodo et nunc congue laoreet. In ultricies suscipit diam quis suscipit. Donec nisl purus, ultricies in tellus quis, scelerisque laoreet dui. Nunc sollicitudin interdum metus. Ut eu nisl ac urna suscipit imperdiet. Donec cursus, eros et sollicitudin luctus, sem enim gravida sem, ac dignissim purus elit sed ipsum. Donec lobortis sapien nunc, quis interdum ante sagittis ut. Vestibulum vel placerat elit, non mollis est. Suspendisse nulla leo, fringilla vel scelerisque id, vulputate eu nisi. Morbi nec fermentum ligula, ac mollis metus. Morbi a felis diam. Duis eu lacinia magna. Curabitur auctor lectus ac leo ultrices, non interdum sem pharetra.
</p>
<p>
Etiam sagittis volutpat mi a pellentesque. Vestibulum et justo vitae nibh suscipit condimentum sit amet quis felis. Curabitur sed orci dui. Nulla ut faucibus ligula. Quisque id laoreet metus. Maecenas egestas odio a lectus tincidunt, quis rutrum eros venenatis. Praesent et urna dignissim, tincidunt augue eget, pharetra tortor. Curabitur ac turpis eros. Aenean nec lacus ut odio faucibus cursus condimentum eu magna. Nunc quis justo vitae sapien aliquam imperdiet.
</p>
<p>
Aliquam ornare, odio vitae luctus cursus, ante quam commodo dui, ac vulputate justo sapien sed mauris. Nulla malesuada commodo odio eu vulputate. Quisque ac ullamcorper diam, non interdum neque. Aliquam id enim auctor, imperdiet turpis sit amet, laoreet eros. Etiam eu lectus vitae lacus mattis semper eu luctus dolor. Aenean velit neque, convallis ut lorem vel, suscipit ultricies elit. Phasellus vel lorem vitae ante varius consequat. Curabitur adipiscing feugiat purus, at gravida nibh cursus vel. Ut purus ante, ultricies ac ultricies non, tempus ac tellus. Etiam id est eget magna tincidunt blandit. Maecenas volutpat, libero eget rhoncus congue, ipsum erat tempus turpis, vel gravida lorem urna eu nisl. Suspendisse eu enim in orci fringilla convallis. Ut sit amet nunc quis justo malesuada scelerisque. Vestibulum quis faucibus risus, eu rutrum lacus. In blandit rhoncus tempus. Nullam aliquet elit aliquam eleifend suscipit.
</p>
<p>
Vivamus nec sem eget mi rhoncus cursus. Nullam nisi elit, dictum quis eros id, adipiscing eleifend massa. Curabitur odio sem, pulvinar ac nunc quis, hendrerit dapibus nulla. Quisque luctus accumsan turpis ut scelerisque. Praesent urna sem, sollicitudin a vehicula eget, aliquam nec nisl. Maecenas ac blandit nisl. Integer fermentum feugiat ligula, ultrices feugiat ipsum pulvinar eu. Cras at faucibus nulla, non imperdiet odio. Fusce lacinia ipsum consectetur, luctus elit quis, semper tortor. Pellentesque a auctor diam. Vestibulum at consequat eros, at mollis massa. Pellentesque eleifend dignissim laoreet. Mauris sit amet nisi ac metus laoreet aliquet nec et risus. Cras malesuada neque non tincidunt ultricies. Quisque vitae enim condimentum, molestie tortor semper, tempor nisi.
</p>
<p>
Quisque et lectus vel mi interdum interdum eget quis ipsum. Etiam vel aliquam urna. Quisque pharetra convallis commodo. Curabitur fringilla diam non laoreet consectetur. Quisque malesuada nibh sed nisl porta vulputate. Ut est nisl, convallis non consectetur a, ultricies vel diam. Curabitur posuere, ipsum viverra fermentum bibendum, diam tellus facilisis justo, eget feugiat tortor elit vel dui. Morbi ultricies urna ut felis porttitor adipiscing in fermentum lacus. In hac habitasse platea dictumst. Duis luctus elementum ligula ut luctus. Mauris commodo ligula dapibus, gravida mauris et, eleifend augue. Nam vulputate eros eget scelerisque molestie.
</p>
<p>
Proin pulvinar arcu hendrerit odio imperdiet mattis. Mauris eget libero eget velit sodales laoreet. Nulla quis euismod libero. Ut ante dolor, semper in sapien id, posuere suscipit risus. Suspendisse potenti. Nulla nec nunc commodo, consequat risus id, tempor urna. Quisque vehicula enim nec blandit euismod. Phasellus aliquam augue id consectetur placerat. Cras orci massa, aliquet vel leo eu, feugiat ultrices turpis. Pellentesque et molestie nulla. Praesent vehicula a enim eu tristique. Ut tempus ultricies quam, id iaculis lectus gravida ac. Ut gravida diam nisi, non tincidunt dui ultricies et. Integer sed fringilla augue, id condimentum diam.
</p>
<p>
Phasellus a ante felis. Nunc eget consequat nisl. Aliquam dapibus ornare mi, eu porttitor felis vestibulum at. Etiam bibendum id lectus quis luctus. Mauris semper et turpis rutrum ullamcorper. Mauris hendrerit malesuada porttitor. Proin et consectetur augue, sagittis placerat dui.
</p>
<p>
Fusce non turpis nec libero cursus posuere vel in erat. Nullam malesuada placerat magna et viverra. Praesent eu lorem lacus. Fusce nunc orci, feugiat ac pretium nec, vestibulum vel elit. Morbi a nibh orci. Nulla ac arcu egestas, sollicitudin est sit amet, ornare tellus. Mauris aliquam nec orci ac eleifend. Aliquam et lacus semper massa consequat fermentum. Proin neque nisi, blandit euismod velit et, dignissim varius mi. Nam porta interdum metus, eu sollicitudin erat ullamcorper sed. Aliquam erat volutpat.
</p>
<p>
Proin eget odio ultrices, sagittis sem ac, dictum nisl. Aenean bibendum id augue sodales lacinia. Morbi vehicula tincidunt tortor ullamcorper venenatis. Aliquam elementum sem at dignissim hendrerit. Aenean dignissim neque urna, quis placerat mi viverra ut. Sed ultrices diam nec risus scelerisque, et consectetur sem laoreet. Suspendisse vitae odio purus. Aenean consectetur lacus vitae massa malesuada, sed interdum enim malesuada. Nulla pellentesque nunc ac dui condimentum interdum.
</p></div>
关于javascript - 粘性标题在向上滚动时向下滑动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41630548/
我正在使用面部跟踪进行 HCI(人机交互)。我正在尝试使用面部控制 PC。 我有 3x3 二维网格按钮。1 2 34 5 67 8 9 假设,当前焦点在按钮 5 上。如果我按向上箭头,则焦点将在 2
我正在为蛇和梯子制作一 block 板,到目前为止,我已经按降序打印了板。但是,我需要以正确的方式打印电路板。 编辑“螺旋下降”意味着 100...91 81...90 80...71 ...
我有一个可以响应式调整大小的菜单,因此每次调整大小时 div (#menuWFhover) 的内容都会重新排列,因此 div 根据窗口大小具有不同的高度。 当我使用 jQuery slideDown/
我们从服务器获取数据并附加 ListView 。我们的问题是,当向上/向下滚动时,它首先显示白屏,然后显示数据。向下/向上滚动时,之前出现的白屏应删除 for (var i=0; i");
我想要一个汉堡图标动态改变颜色的代码,以适应网站的黑色部分/部分和白色。它最初是 3 段白色,js 代码几乎是好的和正确的,但是当它在白色部分时它一直闪烁,并在红色和白色之间闪烁。 js var to
我对点击事件的页脚位置有疑问。我正在使用 bootstrap css,我有一个可折叠元素(bootstrap 中的 Accordion ),当它折叠时它有一个名为 .accordion-toggle.
在此代码段中,使用关键帧和动画并显示无/ block ,div 动画以在悬停时向下滑动。 h1 { padding: 20px; } div { width: 100%; background
我需要对一个 float 进行四舍五入。例如 4.00011 。内置函数 round() 总是在数字 > .5 时向上舍入,在 = 0 val *= 10 ** precision r
我正在尝试就地缩小文件。 我正在用另一个文件的内容替换一个文件的内容,完成后我想确保源文件是否小于目标文件,目标文件是否正确收缩。 (为什么:因为dest文件是一个备份,写入media的开销很大,所以
似乎每当我用一个负整数除以一个正整数时,我都需要它向下舍入 (向 -inf),而不是向 0。但 C# 和 C++ 都向 0 舍入。 所以我想我需要一个 DivideDownward() 方法。我可以用
考虑这个简单的代码: document.addEventListener( 'keypress', function() { console.log( 'press' ); } ); document
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动?我是 Azure 的新手,如果有人能提供一些启发,那就太好了。
有什么方法可以检查 Azure 资源(例如 Azure IoT 中心或事件中心)是否可用。我所说的可用是指它是否已关闭/工作/正常/启动?我是 Azure 的新手,如果有人能提供一些启发,那就太好了。
我见过几个recyclerview的无限滚动示例,但它们都是向下滚动的。 我想要的是一次又一次地加载我的列表,但无论用户是从上面还是从下面滚动。 正常列表 向上滚动 向下滚动 这样可以通过无限滚动一遍
我正在使用带有 View 的 drupal 7,并且我正在使用我发现的向上/向下文本幻灯片的 jquery 脚本。它有效,但是当我尝试将它与带有 ajax 的 View 公开过滤器一起使用时,它似乎不
*场景 我希望制作一个类似于本网站上的 jquery 效果,它位于主 Flash 添加的右侧: http://www.commbank.com.au/ *问题 我已经开始了,但是用很多方法遇到了一些障
互联网。如果这与其他人没有什么关系,请原谅我,但我会将其留在这里,以防这是一个有效的问题。 我正在尝试创建一个文本区域字段,其中用户每次按下键(a-z),都会触发背景颜色更改(在数组中列出)。我一直在
我正在创建一个网络前端来控制一个小型机器人。 Ajax 调用将在 keydown 上进行,以启动机器人,并在 keyup 上进行停止。 我的问题是,当按下某个键时,keyup、keydown 和 ke
我在内容容器中有两个 div,一个向左浮动,另一个向右浮动。我正在使用屏幕的整个宽度。左 div 宽度为 1290px,右 div 宽度为 625px。有时,在加载页面时,滚动条会更改可用屏幕宽度的宽
请看这个UI sketch图片,我在某个站点的侧边栏(黑框)中有这个 div,当我向下滚动或向上滚动时,我不希望它隐藏...我希望它在我向下滚动和移动时自行向下移动当我向上滚动时向上滚动,这样它就永远
我是一名优秀的程序员,十分优秀!