div布局

1、实现两个div切换显示

<button type="button" id="showHidden">点击切换div</button>

<div id="div1" style="display:block">一</div>

<div id="div2" style="display:none">二</div>

<script type='text/javascript'>

function show_hidden(obj) {

　　if(obj.style.display == 'block') {

　　 obj.style.display = 'none';

　　} else {

　　　　　obj.style.display = 'block';

　　}

}

var sh = document.getElementById("showHidden");

sh.onclick = function() {

var div1 = document.getElementById("div1");

var div2 = document.getElementById("div2");

show_hidden(div1);

show_hidden(div2);

return false;

}

</script>

2、固定顶部div

css方法：.head {
    width: 1500px;
    height: 50px;
    background-color: cadetblue;
    position: fixed;
    overflow:hidden;
    z-index:9999;/*防止被遮挡调到最大值*/
}

JS方法：

window.onload = function () {
    document.onscroll = function () {
        let s1 = document.documentElement.scrollTop;
        let s2 = document.body.scrollTop;
        let scroll = s1 == 0 ? s2 : s1;
        let width = document.documentElement.clientWidth;
        let search = document.getElementsByClassName('head')[0];

        if (scroll >= width * 0.001) {
            //第二个窗口固定在顶部
            search.style.position = "fixed";
            search.style.left = '0';
            search.style.top = '0';
        }
        else {
            //不固定
            search.style.position = 'static';
        }
    }
}