我怎样才能制作一个粘性页脚"水槽”;滚动后
How can I make a sticky footer "sink" after scrolling?
我一直在疯狂地尝试实现这一点,但我就是想不通(初学者)。
正如你所看到的,当你向下滚动时,顶部会粘在页面顶部,但也会溢出一点。这是用stickyjs完成的。我也想对头部底部做同样的事情,在滚动一点使其"下沉"几个像素后,同时粘在页面底部,这样就有了更多的可见性,但无论我尝试什么,它都不会起作用。
如果有人能帮忙,我会很感激的。
这是顶部的代码:
#head {
z-index:101;
display: block;
position: absolute;
bottom: 20%;
width:100%;
margin:0 auto;
right:0;
left:0;
height:85px;
background: url(../float.png) #fff 50% 50% no-repeat;
text-indent:-9999px;
overflow:hidden;
}
下面是底部的代码:
#footerhead {
z-index:100;
position:fixed;
left:0px;
bottom:0px;
margin:0 auto;
height:20%;
width:100%;
background:url(../footer.png) #fff 50% 0 no-repeat;
}
这是让它粘在一起的粘性js:
<script>
$(document).ready(function(){
$("#head").sticky({topSpacing:-70});
});
</script>
请帮帮我(
您可以使用jQuery.scroll()函数来实现您想要做的事情。下面是我创建的一个非常适合您的小代码:
$(window).scroll(function() {
if ($(this).scrollTop() > 500) {
$("#footerhead").css("height","5%");
} else if ($(this).scrollTop() < 500) {
$("#footerhead").css("height","20%");
}
});
结果是,如果用户在你的网站上向下滚动500px
,#footerhead
div的高度会降低到5%
,从而隐藏面部的更大部分,使内容区域更可见。接下来,当用户向上滚动时,#footerhead
div的高度将增加回20%
。您还可以将滚动的值从500px
设置为您选择的任何其他值。
这可能对您有用:
<!doctype html>
<html>
<head>
<title>Sticky Bottom</title>
<style type="text/css">
#head {
z-index:101;
position: relative;
height:85px;
width: 100%;
background: none green;
}
#footerhead {
z-index:100;
position:relative;
height:85px;
width: 100%;
background: none red;
}
.is-sticky #footerhead {
position: fixed;
top: auto !important;
bottom: -10px;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://path_to/jquery.sticky.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#head").sticky({topSpacing:-10});
$('#footerhead').sticky();
});
</script>
</head>
<body>
<div id="head">
HEAD
</div>
<div id="footerhead">
FOOTERHEAD
</div>
<div id="content">
<p>Content here..</p>
</div>
</body>
</html>
可能是jsticky错误,但我看到它向每个粘性元素添加了top: -10px
。请注意,只有在向下滚动该元素后,该元素才会变得粘稠并获得类is_sticky
(它不能停留在页脚中)。
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- "此网站似乎使用滚动链接定位效果.这可能不能很好地与异步平移一起工作;
- 页面不可滚动,其中ng include=“”;函数()"-该代码已不再使用
- jQuery mCustomScrollbar"滚动到“;不起作用
- "未捕获引用错误:jquery未定义“-向下滚动菜单
- 我怎样才能制作一个粘性页脚"水槽”;滚动后
- 如何使工作jquery"“滑动”;在iPad上滚动
- ScrollMagic插件正在工作,但不是"打结”;滚动的动画
- jQuery:显示"返回顶部”;滚动链接?不处理窗口
- "完美滚动条”;(jQuery插件)不是't在其容器中填充Angular.js时正确初始化
- "自制的“;平滑地消失滚动条
- "无休止滚动”;HTML表中的效果