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

Question

我有几个图标位于页面的右下角。调整窗口大小时，我希望图标消失，否则会与上面的内容冲突。我在使用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;

}

提前致谢！

Answer 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。从本质上讲，当他们重新加载页面时，您需要重新检查页脚.1秒，以确保它正确定位。

祝你好运！