场景
如淘宝页面,滚动条滚动一定距离后页眉会有一个固定的搜索框、右侧也会将导航条固定,并且产生一个新的板块。如下图所示:
这种样式是需要在script中做点样式,代码如下:
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> //我也不知道是啥,但是不加不行
<script>
// 右侧导航滚动固定
$(function() {
$(window).scroll(function() {
if($(document).scrollTop() >= 240) { //定义滚动多少后产生改变
$(".box1").addClass("box1-flex").slideDown(); //滚动一定距离后导航条样式改变,固定
$(".back-to-top").show(); //滚动一定距离后,回顶区域显现
} else {
$(".box1").removeClass("box1-flex").slideDown(); //回滚后导航条样式变回去
$(".back-to-top").hide(); //回滚后回顶区域隐藏
}
})
})
// 搜索框滚动固定
$(function() {
$(window).scroll(function() {
if($(document).scrollTop() >= 55) { //定义滚动多久后产生改变
$(".search").addClass("search-flex").slideDown(); //滚动一定距离后整个搜索区域样式改变
$(".site-nav").addClass("site-nav-fixed").slideDown(); //滚动一定距离后搜索框样式改变
$(".nav-pic").addClass("nav-pic-fixed").slideDown(); //滚动一定距离后图片样式改变
$(".qrcode").hide(); //产生固定导航栏后二维码隐藏
$(".site-nav-fb").show(); //产生固定导航栏后生成一个新的不固定的搜索框用于占位,防止页面布局打乱
$(".search-info").hide(); //产生固定导航栏后搜索框下文字隐藏
} else {
$(".search").removeClass("search-flex").slideDown(); //回滚后整个搜索区域的整体样式改变
$(".site-nav").removeClass("site-nav-fixed").slideDown(); //回滚后固定的导航栏样式改变,变成不固定的
$(".nav-pic").removeClass("nav-pic-fixed").slideDown(); //回滚后图标logo样式变回去
$(".site-nav-fb").hide(); //回滚后不固定的搜索框隐藏
$(".search-info").show(); //回滚后搜索框下方文字显示
$(".qrcode").show(); //回滚后搜索框二维码显示
}
})
})
</script>