* {

margin: 0;

padding: 0

}

.top {

height: 168px;

}

img {

vertical-align: top;

}

.main {

margin: 0 auto;

width: 1000px;

margin-top: 0px;

}

.fixed {

position: fixed;

top: 0;

left: 0;

}

// 页面滚动，滚动top的高度后，就实现导航栏固定，否则导航栏不固定

/*

思路分析

1. 页面增加滚动事件：window.onscroll

2. 滚动事件处理

2.1 获取页面滚动高度：window.pageYOffset

2.2 获取top的高度

2.3 判定：滚动的距离与top高度大小

2.3.1 如果大于：导航栏固定；nav.classList.add('fixed');

2.3.2 如果小于等于：导航栏不固定：nav.classList.remove('fixed');

*/

let a = document.getElementById('mainPart');

let b = document.getElementById('navBar');

// 先拿到mainPart的本身的marginTop值

let mainMargin = parseInt(getComputedStyle(a)['marginTop']);

console.log(mainMargin);

// console.log(b.offsetHeight);

// 1. 页面增加滚动事件：window.onscroll

window.onscroll = function () {

// 2. 滚动事件处理

// 2.1 获取页面滚动高度：window.pageYOffset

// 2.2 获取top的高度

let topPart = document.getElementById('topPart');

let navBar = document.getElementById('navBar');

let mainPart = document.getElementById('mainPart');

// console.log(topPart.offsetHeight, navBar.offsetHeight);

// 2.3 判定：滚动的距离与top高度大小

if (window.pageYOffset > topPart.offsetHeight) {

// 2.3.1 如果大于：导航栏固定；nav.classList.add('fixed');

navBar.classList.add('fixed');

// 细节：navBar脱标后，没有高度，导致main会顶上去

// 解决方案：给main增加一个marginTop属性，值是自己原来的值 + navBar的高度

mainPart.style.marginTop = mainMargin + navBar.offsetHeight + 'px';

} else {

// 2.3.2 如果小于等于：导航栏不固定：nav.classList.remove('fixed');

navBar.classList.remove('fixed');

// 不固定导航：减去导航栏的高度(回到原始状态)

mainPart.style.marginTop = mainMargin + 'px';

}

};

一键复制

编辑

Web IDE

原始数据

按行查看

历史