Question

我的侧栏几乎按照我的意愿工作，但在某些页面高度上遇到问题：

侧栏的工作原理如下：

当“菜单”点击页面顶部时，会出现一个关于菜单的图像，整个面都已修复 - 工作！
如果页脚在固定时与侧边栏底部发生碰撞，则会开始向上滚动 - 工作！
如果窗户高度小于侧边栏高度，则永远不会修复 - 不能正常工作。

对于第3点，在581px和751px（高度）之间存在大约170个像素的区域，其中侧边栏开始跳跃。在示例中，如果浏览器高度为~580或更低，则它可以正常工作，但如果它落入该区域则开始变得紧张。

我模仿了这里的行为：

https://jsbin.com/wokupacebu/edit?html,css,js,console

与jsbin中的窗口大小不太一致，因此要查看全屏工作副本，请参阅此处：

https://output.jsbin.com/wokupacebu

这是我的JS - 可以在jsbin中找到CSS和HTML。

$(function() {
    $sideBarContainer = $("#side-bar-container");
    $sideBar = $("#side-bar");
    $sideImageContainer = $("#side-image-container");
    $sideImage = $("#side-image")
    $footer = $("#footer");
    $window = $(window);

    $(window).on("scroll.sidebar resize.sidebar",function() {
        setSideBarFixable();
    });

    function setSideBarFixable() {
    if ($window.height() < $sideBar.height() + $sideImage.outerHeight()) {           
        $sideBar.removeClass("fixed");
        $sideBarContainer.css("width","auto");
        $sideImageContainer.css("height","0");
        return;
    } else {
        if ($window.scrollTop() >= $sideBarContainer.position().top) {
            $sideBar.addClass("fixed");
            $sideBarContainer.css("width",$sideBar.outerWidth() + "px");
            $sideImageContainer.css("height",$sideImage.outerHeight() +  +"px");
        } else {
            $sideBar.removeClass("fixed");
            $sideBarContainer.css("width","auto");
            $sideImageContainer.css("height","0");
         }
         var diff = $footer.position().top - $window.scrollTop() - $sideBar.outerHeight();
         if (diff <= 0) {
             $sideBar.css("top",diff+"px");
         } else {
             $sideBar.css("top","0");
         }
    }
}

固定侧栏，显示图像

0 个答案: