Html
    Css
    Js

    
                        
html,body {
	margin:0;
	padding:0;
	background:#f6f1f1;
}
.header {
	box-shadow:0 2px 10px rgba(0,0,0,.05);
	background:#fdf;
	position:fixed;
	top:0;
	width:100%;
	z-index:1000;
}
header {
	min-width:1200px;
	max-width:1440px;
	margin:0 auto;
	height:56px;
	overflow:hidden;
}
header .logo {
	float:left;
	color:#ccc;
	font-weight:700;
	font-size:20px;
	padding:0 16px;
	line-height:56px;
}
header .menu-right {
	float:right;
	padding:0 16px;
	margin-right:10px;
	line-height:56px;
}
header .menu-left {
	display:flex;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	height:56px;
	align-items:center;
}
header .menu-left .search {
	position:relative;
}
header .menu-left .search input {
	border-radius:5px;
}
header .menu-left .search i {
	position:absolute;
	right:10px;
	line-height:27px;
}
header .menu-left span {
	font-size:17px;
	color:#333;
	padding:0 20px;
	cursor:pointer;
}
header .common {
	transition:transform .3s;
}
header .common2 {
	transition:transform .3s;
}
header .common2 {
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	height:56px;
}
header .common2 .common-container {
	display:flex;
	justify-content:space-between;
	height:56px;
	align-items:center;
}
body>section {
	margin-top:56px;
	height:1400px;
}
body>section section.main {
	height:1000px;
	width:1200px;
	margin:0 auto;
}
section.zan {
	position:fixed;
	top:216px;
	left:calc((100vw - 1200px)/2 - 78px)
}
.main {
	margin-top:20px;
}
.main .slide-left {
	float:left;
	width:66%;
}
.main .slide-left img {
	width:100%;
}
.main .slide-right {
	float:left;
	width:33%;
	padding-left:40px;
	padding-right:100px;
	margin-top:20px;
	box-sizing:border-box;
}
.main .slide-right .board {
	}.main .slide-right .board a {
	}.main .slide-right .board a img {
	width:100%;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.9.1
 立即下载

原生js简书顶部滚动代码

更新时间:2020-08-02 22:49:18

原生js+css3实现。特点:优化常规节流函数

0