更改页面滚动上的元素样式
Change Element Style On Page Scroll
我想在用户向下滚动100px后更改元素的可见性。
,我已经有一些代码了
var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 100 ) {
if( !fixed ) {
fixed = true;
$('#logo-scroll').css({position:'fixed', display:'visible !important'});
}
} else {
if( fixed ) {
fixed = false;
$('#logo-scroll').css({display:'none'});
}
}
});
JSFiddle。
代码有两个问题。
它不会默认为不可见,我希望它开始时是不可见的。
它不会重复,当用户向上滚动时,它不会返回到不可见状态。
更多详细信息,
我想制作这样的标题,但是,正如你所看到的,在某个点上,你可以看到小徽标的一半和大徽标的一部分。它对techcrunch没有太大影响,因为标题很小,但在我的网站上,它确实影响了。我已经做了所有的东西,我只需要在display:none
中启动它,并在100px后变得可见。
使用:display:block;
和display:none;
jsFiddle演示
将此添加到您的CSS:
#logo-scroll{ display:none; position:fixed; }
jQ:
var $logo = $('#logo-scroll');
$(document).scroll(function() {
$logo.css({display: $(this).scrollTop()>100 ? "block":"none"});
});
BTW:在TC页面上,这只是一个带有z索引的CSS
游戏。仅此而已。所有元素在页面加载时都是可见的,只是滚动使大徽标下方出现z索引较低的元素。
在普通Javascript中,类似于这个:
var win = window,
docEl = document.documentElement,
$logo = document.getElementById('logo-scroll');
win.onscroll = function(){
var sTop = (this.pageYOffset || docEl.scrollTop) - (docEl.clientTop || 0);
$logo.style.display = sTop > 100 ? "block":"none" ;
};
这个问题已经得到了回答。只是添加了一个更好的例子,可能对其他人有用,这正是op想要的。
代码和演示
已编辑:添加了原始源代码中的实际代码。
jQuery:
// This function will be executed when the user scrolls the page.
$(window).scroll(function(e) {
// Get the position of the location where the scroller starts.
var scroller_anchor = $(".scroller_anchor").offset().top;
// Check if the user has scrolled and the current position is after the scroller start location and if its not already fixed at the top
if ($(this).scrollTop() >= scroller_anchor && $('.scroller').css('position') != 'fixed')
{ // Change the CSS of the scroller to hilight it and fix it at the top of the screen.
$('.scroller').css({
'background': '#CCC',
'border': '1px solid #000',
'position': 'fixed',
'top': '0px'
});
// Changing the height of the scroller anchor to that of scroller so that there is no change in the overall height of the page.
$('.scroller_anchor').css('height', '50px');
}
else if ($(this).scrollTop() < scroller_anchor && $('.scroller').css('position') != 'relative')
{ // If the user has scrolled back to the location above the scroller anchor place it back into the content.
// Change the height of the scroller anchor to 0 and now we will be adding the scroller back to the content.
$('.scroller_anchor').css('height', '0px');
// Change the CSS and put it back to its original position.
$('.scroller').css({
'background': '#FFF',
'border': '1px solid #CCC',
'position': 'relative'
});
}
});
HTML
<div class="container">
<div class="test_content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus interdum metus nec neque convallis id interdum nibh aliquet. Nulla eget varius diam. Ut ut dolor dolor. Mauris vehicula sodales mi quis euismod. In sem metus, volutpat nec fringilla sed, fermentum ac turpis. Cras aliquam venenatis rutrum. Donec pharetra ante sit amet justo pellentesque nec consequat ante elementum. Ut imperdiet iaculis tortor, id pretium urna pharetra sit amet. Aenean pharetra nunc risus, ac scelerisque urna. Morbi dictum egestas augue, in euismod metus commodo ac. Duis nisl ante, consequat et tincidunt id, eleifend eu ante. Integer lectus velit, tempus eu feugiat et, adipiscing ut mauris.
</div>
<!-- This div is used to indicate the original position of the scrollable fixed div. -->
<div class="scroller_anchor"></div>
<!-- This div will be displayed as fixed bar at the top of the page, when user scrolls -->
<div class="scroller">This is the scrollable bar</div>
<div class="test_content">
Quisque sollicitudin elit vitae diam consequat accumsan. Suspendisse potenti. Donec dapibus tortor at justo eleifend at pellentesque leo lobortis. Etiam ultrices leo et nulla iaculis eu facilisis augue fermentum. Pellentesque eu leo purus. Vestibulum bibendum, metus at bibendum blandit, lacus neque porttitor diam, id facilisis lectus mauris et leo. Donec adipiscing interdum lacus sed condimentum. In auctor sollicitudin orci, ac interdum risus aliquet ullamcorper. Curabitur mollis accumsan vulputate. Etiam adipiscing diam nec dui posuere ut tincidunt felis tristique. Vestibulum neque enim, placerat sed placerat commodo, consectetur ac mauris. Sed ultrices pretium nibh, a blandit libero imperdiet pulvinar. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
...
</div>
CSS:
.container{font-size:14px; margin:0 auto; width:960px}
.test_content{margin:10px 0;}
.scroller_anchor{height:0px; margin:0; padding:0;}
.scroller{background:#FFF; border:1px solid #CCC; margin:0 0 10px; z-index:100; height:50px; font-size:18px; font-weight:bold; text-align:center; width:960px;}
相关文章:
- 如何提供在javascript中编写对对象的重复访问以设置元素样式的简写
- .clone().appendTo-替换不起作用的元素样式
- 使用JavaScript更改带有窗口高度的元素样式
- Javascript重置元素样式
- 取消:活动元素样式
- 什么是最好的表单元素样式库/插件(jQuery)
- 更改页面滚动上的元素样式
- 动态更新数百万个 DOM 元素样式的最快方法
- 覆盖元素.样式表.css文本
- 在禁用 JavaScript 时添加元素样式
- 确定所有屏幕尺寸的元素样式
- 设置 HEAD 元素样式以将其用作数据存储
- 如何使用带有 % 符号值的 ERB 和 JQuery 修改元素样式属性
- asp.net 高度属性的元素样式问题
- 如何覆盖元素样式,使其无法更改
- 如何使用ng样式单击时更新元素样式
- 使用 jQuery 更新 HTML 元素样式参数值
- 将鼠标悬停在另一个元素上时更改元素样式
- 如何将加载到<对象>中的元素样式设置为数据
- 在jQuery UI对话框中设置元素样式