用HTML和css和js怎样实现随着页面滑动

html-css015

用HTML和css和js怎样实现随着页面滑动,第1张

完全用CSS控制就可以了，页面在滚动，给这个DIV设置position:fixed那么页面不管怎么滚动，这个DIV是中在顶端

解决方案二：

显示合作div absolute定位，判断滚动到div位置的时候设置position为fixed，同时设置top为0

<div style="height:500pxbackground:#999"></div>

<div id="fixedMenu" style="background:#eeewidth:100%">我是菜单，我到页头会固定</div>

<div style="height:900pxbackground:#999"></div>

<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>

<script type="text/javascript">

$(function () {

var ie6 = /msie 6/i.test(navigator.userAgent)

, dv = $('#fixedMenu'), st

dv.attr('otop', dv.offset().top)//存储原来的距离顶部的距离

$(window).scroll(function () {

st = Math.max(document.body.scrollTop || document.documentElement.scrollTop)

if (st >= parseInt(dv.attr('otop'))) {

if (ie6) {//IE6不支持fixed属性，所以只能靠设置position为absolute和top实现此效果

dv.css({ position: 'absolute', top: st })

}

else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 })

} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' })

})

})

</script>

解决方案三：

对页面y轴偏移量进行判断，如果大于某个值（具体情况具体应对），克隆原来的层，设置新的id，新的id意味着新的css样式：position：fixed，然后隐藏原来的层，添加克隆的层； 否则，即向上滑动到一定位置时，remove克隆的层，显示隐藏的层，达到目的~代码仅供参考。。。

$(window).scroll(function(){

if(window.pageYOffset>108){

if($("#topbar").length == 0){

var x=$("#wrap_most_used_bookmark").clone()

x.attr("id","topbar")

$("body").append(x)

$("#return_top").fadeIn()

}

}

else{

$("#topbar").remove()

$("#return_top").fadeOut()

}

})

大家都知道css中<ul>元素中的各条目<li>默认都是纵向排列的，我们需要定义CSS来让其横向排列起来并且超出屏幕可以滑动。因为本人是html小白 查了资料才实现下面GIF图的效果。（有什么更好的方法或者有写的不对的地方 希望大神们多多指出，与君共勉）

效果GIF图：

第一步 ul 中的css设置 <ul id = "list"></ul>

#list { overflow-x: auto//设置x轴可滑动 list-style: none//去掉li上的小点 white-space:nowrap//元素不换行 width: auto(宽度) }

第二步 li中的css设置 <li class = "item">

.item { margin-left: 20px//每个li设置间距为20px display: inline-block//让所有的li在一行 注意这里不能用float:left 因为设置float后里超过一屏后会自动换行 }

先介绍一下上面的重要的css中的属性作用，大家也可以去w3scholl去参考学习。

这只是在x轴上的滑动 有一个相对的是overflow-y 只在y轴上滑动

width是我们最常用的属性，但是我常用的为lenght和% 忽略了auto这个属性 我们大可不惜自己去计算宽度，使用auto可以自适应宽度。

使用用flex-box布局

#list { displey:-webkit-flexdisplay: flex-webkit-flex-flow:row nowrap//设置排列方式为横向排列，并且超出元素不换行 flex-flow:row nowrapoverflow-x: autolist-style: none}

<style type="text/css">

html,body{height:100%}/*定义高度为100%*/

*{margin:0padding:0}

.header,.footer{width:100%height:5%background:#000}/*上下高度5%；中间盒子高度90%*/

.main{overflow-y:scrollwidth:100%height:90%}  

.main p{height:1500pxwidth:100%text-align:centerline-height:1500px} 

</style>

<div class="header"></div>

<div class="main">

<p>高度1500px</p>

</div>

<div class="footer"></div>

顶部和底部高度5%；中间盒子高度90%，这样刚好100%，你内容填充到中间的盒子就行，如果需要特殊样式，顶部和底部可以用position定位，main盒子加上margin-top、margin-bottom分别等于顶部和底部的高度就行

所有div的总高度不能大于100%，不然会出现2个滚动条，因为现在的滚动条是main盒子的，如果超过100%；浏览器的滚动条也会出现