html侧边导航栏,浮动侧边导航栏的基本布局

短命女 2022-10-06 11:46 396阅读 0赞

先来一张效果图

a34e46fcb0a2

效果图

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()是根据自定义的位置跳转,从而更加灵活。

发表评论

表情:
评论列表 (有 0 条评论,396人围观)

还没有评论,来说两句吧...

相关阅读