html侧边导航栏,浮动侧边导航栏的基本布局
先来一张效果图
效果图
HTML
JS Bin
头部内容
左侧的一些内容
- 首页
- 学习中心
- 考试中心
- 考试动态
子元素1—首页
子元素2—学习中心
子元素3—考试中心
子元素4—考试动态
子元素5
子元素6
子元素7
CSS
*{
margin:0;
padding:0;
}
body{
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
body::-webkit-scrollbar {
display: none;
}
.detail{
position: absolute;
top: 0;
left: 0;
/* bottom: 0;
right: 0; */
border: 2px solid red;
}
.top {
border: 1px solid;
position: fixed;
top: 0;
height: 60px;
width: 100vw;
}
.Content {
height: 3900px;
width: 100vw;
border: 1px solid red;
margin-top: 60px;
position: relative;
left: 0px;
/* overflow-y: scroll; */
}
.leftContent {
position: fixed;
left: 0;
border: 1px solid blue;
}
ul {
position: fixed;
right: 0;
list-style-type: none;
margin: 0;
padding: 0;
}
a {
display: block;
background-color: green;
color: white;
width: 80px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,
a:active {
background-color: #98bf21;
}
.parent {
border: 1px solid green;
width: 160px;
position: absolute;
left: 190px;
}
.child {
height: 550px;
border-top: 1px solid blue;
}
JavaScript
var child1 = document.getElementById(‘child1’);
var child2 = document.getElementById(‘child2’);
var child3 = document.getElementById(‘child3’);
var child4 = document.getElementById(‘child4’);
// 点击首页和考试动态的跳转方式是通过window.scrollTo()
child1.onclick = function(){
window.scrollTo({
top: 0,
behavior: “smooth”
});
}
child4.onclick = function(){
window.scrollTo({
top: 1655,
behavior: “smooth”
});
}
// 点击学习中心和考试中心是通过element.scrollIntoView()
child2.onclick = function(){
document.querySelector(‘.studyCenter’).scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
child3.onclick = function(){
document.querySelector(‘.examinationCentre’).scrollIntoView({ behavior: ‘smooth’, block: ‘start’ });
}
点击预览
两种跳转方式的详情参考MDN文档：window.scrollTo()和element.scrollIntoView()
element.scrollIntoView()是相对于视口跳转，而window.scrollTo()是根据自定义的位置跳转，从而更加灵活。
落日映苍穹つ
今天药忘吃喽~
港控/mmm°
朱雀
你的名字
小鱼儿
还没有评论，来说两句吧...