...的页面中,我需要在页面的底部做一个元素相对于浏览器的fixed...

发布网友发布时间：2022-04-24 05:36

我来回答

共2个回答

热心网友时间：2022-04-20 11:50

如果你不介意那个横条在footer底下的话可以仅仅用CSS就能实现

.fixed{position:fixed};
.footer{marging-button:50px}//如果浮动块的高度是50的话

热心网友时间：2022-04-20 13:08

JS JS JS JS追问大神，可否给代码？

追答

我的想法是，你把 fixed 和 footer 都放在同一个 div 里

<div id="hey">
<div id="fixed">FIXED</div>
<div id="footer">FOOTER</div>
</div>

它们的样式分别是

html, body { margin: 0; padding: 0 }
#hey { width: 100%; position: fixed; bottom: -100px; }
#fixed { background: #939393; height: 100px; text-align: center; line-height: 100px; }
#footer { background: #3A3A3A; height: 100px; text-align: center; line-height: 100px; }

然后就可以在 head 的 script 里写 JS 了

window.onscroll = function() {
    var vheight = document.body.scrollTop + document.body.clientHeight;
    var theight = document.body.scrollHeight;
    var hey = document.getElementById("hey");
    var heyheight = 100;        // fixed 或者 footer 的高度
    if(vheight >= theight - heyheight)
        hey.style.bottom = (-heyheight + heyheight * ((vheight - theight + heyheight) / heyheight)) + "px";
    else
        hey.style.bottom = -heyheight + "px";
};