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

【问题标题】：Preventing a fixed element from moving up past certain height on resize防止固定元素在调整大小时向上移动超过特定高度
【发布时间】：2014-07-21 22:59:25
【问题描述】：

我有几个图标位于页面的底部和右侧。调整窗口大小时，我希望图标消失，否则它们与上面的内容冲突。在使用 min-width 从左到右调整大小时，我已经设法解决了这个问题，但似乎无法使用 min-height 找到解决方案。

欢迎 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;

}

提前致谢！

【问题讨论】：

【解决方案1】：

如果您愿意使用一点 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 中，但我想你会明白的。第一行是最重要的——您检查文档是否与窗口的视口一样高。如果是，则将图标相对定位（因此它们会消失），否则它们将保持固定。

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

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

position_function 等于上面的 jquery/coffeescript。本质上，您在重新加载页面时每 0.1 秒重新检查一次页脚，以确保其定位正确。

祝你好运！

【讨论】：