0

所以我有以下 HTML 标记；

<div id ="page_shadow">
<div id="blog_content">
     <div id="main_content_container>

       Main Content

     </div>

     <div id="swrapper">
        <div id="blog_sidebar">
          Sidebar Content
        </div>
     </div>
</div>
</div>

以下CSS；

    #blog_sidebar.fixed {
  position: fixed;
  top: 0;
}

#swrapper {
    position:absolute;
    right:0;
}

#blog_sidebar {
    width: 330px;
    padding:10px;
    padding-top:25px;
    height:auto;
}
#main_content_container {
    width:600px;
    float:left;
    height:auto;
    padding-bottom:15px;
}
#blog_content {
position:relative;
width:960px;
margin-left:auto;
margin-right:auto;
min-height:1300px;
height:auto;
background:#FFFFFF;
z-index:5;
}
#page_shadow {
background:url('../images/background_shadow.png') top center no-repeat;
padding:10px;
    margin-top:-60px;
}

以下javascript；

            <script>
        $(document).ready(function(){
          var top = $('#blog_sidebar').offset().top - parseFloat($('#blog_sidebar').css('marginTop').replace(/auto/, 0));
          var bottom = $('#blog_content').position().top+$('#blog_content').outerHeight(true) - $('#blog_sidebar').height() - 35;
          $(window).scroll(function (event) {
            // what the y position of the scroll is
            var y = $(this).scrollTop();
          
            // whether that's below the form
            if (y >= top) { //&& y <= bottom 
              // if so, ad the fixed class
              $('#blog_sidebar').addClass('fixed');
            } else {
              // otherwise remove it
              $('#blog_sidebar').removeClass('fixed');
            }
          });
        });
        </script>

好的，所以基本上有两种情况发生。如果页面加载时浏览器视口在位置更改为y之前的位置上方，则该元素将保留在 blog_content 容器中。#blog_sidebarfixed

但是，如果页面被加载，如果(y >= top) = True导致$('#blog_sidebar').addClass('fixed');元素被推送到 blog_content 容器之外。

同样，只有在= or below加载页面时视口是触发器时才会发生这种情况。

例如，如果我要走到页面的一半，然后单击以刷新页面，浏览器会加载页面和元素，然后跳转到之前的位置。固定位置的元素在正确的位置显示一瞬间，然后跳到外面#blog_content与元素的左侧对齐。

我有一个小例子来展示布局等的基础知识，但我认为我不能准确地展示 jsfiddle 中发生的事情。http://jsfiddle.net/ce3V3/

TLDR

因为这很混乱。简短的版本是我正在使用 DOM 中的固定位置元素更改静态定位元素，如果窗口刷新并跳过某个点，这会导致固定定位元素不合适。如果用户重新加载页面并且窗口在页面的中间跳转，我不希望固定位置元素跳出位置。

在此处输入图像描述

4

0 回答 0