jquery - 防止固定元素在调整大小时向上移动超过特定高度

我在页面的底部和右侧放置了一些图标。调整窗口大小时，我希望图标消失，否则它们会与上面的内容冲突。我已经设法解决了使用最小宽度从左到右调整大小时的问题，但似乎无法使用最小高度找到解决方案。

JQuery 和 CSS 都受到欢迎。图标被赋予一个类(.icon)并嵌套在一个部分(#footer)中。这是我所拥有的；

CSS

#footer .icons{
position: fixed;
bottom:10px;
left:0;
width:98%;
min-width:1350px;

.icons{
display:inline-block;
text-align:right;
    z-index:-9999;
float:right;
right:10px;
padding:2px;
bottom:10px;

提前致谢!

最佳答案

如果您愿意使用一点 JQuery，那非常简单!

.unfixed_icons {
    position: relative
    top: [whatever you want]
    left: [whatever you want]
}

您保持与上面相同的 html，不要将类 unfixed_icons 添加到任何内容。

if $(document).height() > $(window).height()
    $('.icons').addClass 'unfixed_icons'
else
    $('.icons').removeClass 'unfixed_icons'

抱歉，这是在 coffeescript 中，但我想您会理解的。第一行是最重要的——您检查文档是否与窗口的视口(viewport)一样高。如果是，则使图标相对定位(这样它们就会消失)，否则它们将保持固定。

每当有人重新加载页面时，这都可以正常工作，但如果你希望它在有人调整窗口大小时也重置，你需要这样的东西:

(window).resize ->
    clearTimeout(resizeTimer)
    resizeTimer = setTimeout(position_function, 100)

其中 position_function 等于上面的 jquery/coffeescript。本质上，当他们重新加载页面时，您每隔 0.1 秒就会重新检查一次页脚，以确保它的位置正确。

祝你好运!

关于jquery - 防止固定元素在调整大小时向上移动超过特定高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24876234/