Question

我希望图像在滚动过程中出现在屏幕上时会固定，但如果用户向上滚动则会变得不固定。

但是，当我在滚动功能上使用JS将图像位置更改为固定时，它会突然跳起并调整大小，我不知道为什么。我的修复是创建变量，在变得固定之后改变图像的宽度和左边的值，但是我想这样做会在页面上显示多个图像，并且每个图像似乎需要不同的宽度和左边的调整。我不确定从概念上导致这个问题的是什么。只需将宽度和左侧重置为原始值即可。固定位置是否调整大小和图像。

这是问题的jsfiddle。这是代码。 JS：

 var sitckyImageWidth = "38.4%";
  var normalImageWidth = "48%";


document.addEventListener("scroll", function(){

  var windowTop = $(window).scrollTop();
  var  windowWidth = window.innerWidth;
  var  windowHeight = window.innerHeight;

   //loop through each div and grab top/bottom/midpoint info and find id
   $('.articles').each(function(i){
     var top = $(this).offset().top;
     var bottom = top+ $(this).height();
     var midPoint = (bottom+top)/2;
     var thisId = this.id;
     var newId;

    //use container div info to find media info
     var newId = thisId+"Media";
     var sectionImage=document.getElementById(newId);
     var sectionImageTop = $(sectionImage).offset().top;

      //if article is on the page, change position to fixed and set top position
     if (top<=windowTop&&bottom>windowTop){

       $(sectionImage).css("top","10px")
       $(sectionImage).css("position","fixed")
       //$(sectionImage).css("width",sitckyImageWidth)
     }
      //if container is not at top of the page, return to relative
     if (bottom<=windowTop||(bottom>windowTop&&top>windowTop)){
       $(sectionImage).css("position","relative")
     }
   })
}); //end scroll

Answer 1

固定位置意味着元素相对于视口具有相对大小和位置，而不是它们的父元素。

具体来说，这里发生的是ID为article1Media的div设置宽度为48％。当它具有position: relative的CSS属性时，它将解析为其包含元素（id为article1的div）宽度的48％，但是当它位置固定时，解析为宽度的48％的视口。由于<body>元素上存在隐含的8px余量，因此这些余量不同。

有一些不同的解决方案，您如何解决这个问题取决于您希望如何构建您的网站。

示例修复1

对您的直接示例的一个简单修复是简单地添加以下CSS。

body{
    margin:0px;
}

.image{
    margin:8px;
}

https://jsfiddle.net/Chipmo/k56qkk5b/13/

这会将隐式边距移动到图像元素上。当然，您可以将其设置为您喜欢的任何内容，或完全省略它。

查看CSS resets以获取有关覆盖隐式默认样式的更多信息，但请注意，可能会导致过热的重置代码出现问题。

（编辑：）要清楚上面的代码绝对不是代码中的问题，无处不在。它只适用于像jsFiddle这样非常简单的HTML页面。）

示例修复2

您可以考虑的另一种技术是使用jQuery .width（）和.height（）函数将宽度和高度锁定为初始值。这将是不灵活的，你将不得不做额外的工作，使其响应（对于移动等），但在某些情况下可能是适当的。

示例修复3

更便携的解决方案可能是避免使用相对大小调整以支持固定宽度，然后使用CSS media queries进行修复。像这样：

.image{
    width:500px;
}

@media(min-width:800px){
    width:300px;
}

示例修复4

如果您希望保留使用百分比的“流动”性质，我建议您使用calc以及在固定位置时应用的偏移（因此，您在制作时添加一个类）图像固定）适当调整大小。

.media.image-fixed{
  position:fixed;
  width:calc(48% - 8px);
}

请参阅此示例https://jsfiddle.net/Chipmo/6mu2Lt9g/2/

Answer 2

由于应用了position属性而不是因为滚动，因此观察到上述行为。请查看以下链接Position Properties
位置固定：固定位置元素相对于未打开的文档任何父容器.Hence占用可用的完整宽度。位置相对：相对定位元素相对于托管行为 containers。和内部元素使用托管父宽度。

在滚动

2 个答案: