击中页脚时侧栏停止

Posted 2023-03-21

【中文标题】击中页脚时侧栏停止

【英文标题】：Side bar stop when hitting footer

【发布时间】：2017-02-25 07:02:18

【问题描述】：

我在这里尝试了很多建议，但似乎都没有。 我试图阻止侧边栏“div class="fixed-col-left fixed-left" 在小屏幕上越过页脚。

<section class="contain-main">
<div class="center-div inner-col-2">
<div class="fixed-col-main">
<div class="fixed-col-left fixed-left"></div>
<div class="fixed-col-right"></div>
</div>
</div>
</section>
<footer class="footer-main"></footer>

到目前为止，我已经得出了这个 JS 结果，但它似乎仍然不起作用。

<script type="text/javascript">
    $(function() 
        $.fn.scrollBottom = function() 
            return $(document).height() - this.scrollTop() - this.height();
        ;

        var $el = $('#fixed-col-left>div');
        var $window = $(window);

        $window.bind("scroll resize", function() 
            var gap = $window.height() - $el.height() - 10;
            var visibleFoot = 400 - $window.scrollBottom();
            var scrollTop = $window.scrollTop()

            if(scrollTop < 400 + 10)
                $el.css(
                    top: (400 - scrollTop) + "px",
                    bottom: "auto"
                );
            else if (visibleFoot > gap) 
                $el.css(
                    top: "auto",
                    bottom: visibleFoot + "px"
                );
             else 
                $el.css(
                    top: 0,
                    bottom: "auto"
                );
            
        );
    );
    </script>

视频演示展示了正在发生的事情。 http://sendvid.com/vfbv7pvd

【问题讨论】：

你能提供小提琴或类似的东西吗，我会帮你的。或者添加 css。

【参考方案1】：

问题在于 CSS 定义：

 .fixed-col-left.fixed-left 
    position: fixed;
    top: 113px;
  

position: fixed 导致重叠，在脚本中将position 属性设置为absolute 将导致重叠停止发生。

【讨论】：

嗨，迈克。抱歉，这是 的错字？

这里是页面链接newcastlenow.org.au/what-we-do/now

将 css 从 fixed 更改为 absolute 会停止固定菜单。

你的意思是在JS中添加类吗？

@ChrisStonestreet 你可以去掉这个类，而是将position: fixed 和position: absolute 标签添加到$el.css() 函数中，让它动态变化