响应式布局中的固定元素

Question

我的网站中有一个元素，我可以通过以下方式将其从相对位置更改为固定位置：

jQuery(document).ready(function($){
$(window).scroll(function(){if($(this).scrollTop() > 200 ){
    if($('#order_link').css("position") == "relative"){
      $('#order_link').css({"position":"fixed", "right": "290px", "top": "-20px"});
    }
  }else{
     $('#order_link').css({"position":"relative", "right": "0", "top": "0px"});
  }
});   

但当我缩小窗口width #order_link远离网站的边界时

我该如何解决？这是我的网站http://sprint.tmweb.ru/my-dealem/pechat/businesscard.html

Answer 1

我有一个解决方案。更改css，如下所示：

.art-nostyle{
     position:relative;
}
.art-nostyle .custom{
     height: 50px;
     position: absolute;
     right: 0;
     width: 220px;
 }
.art-nostyle .custom #order_link{
     position:initial;
 }

并更改jquery，如下所示：

jQuery(document).ready(function($){
    $(window).scroll(function(){if($(this).scrollTop() > 200 ){
       if($('#order_link').css("position") == "relative"){
           $('#order_link').css({"position":"fixed", "right": "initial", "top": "-20px"});
       }
    }else{
        $('#order_link').css({"position":"relative", "right": "initial", "top": "0px"});
    }
  }); 

Answer 2

一种解决方案是使用%值而不是px。

$('#order_link').css({"position":"fixed", "right": "10%", "top": "-20px"});

或者，当屏幕尺寸较小时，您可以使用媒体查询来设置正确的值。您还可以在JQuery中检查窗口大小以减少/更改正确的值。

Answer 3

将红色标题放在position: relative div内，然后在position: absolute内的right: 0px内设置div按钮。

Answer 4

在这种情况下，您需要使用百分比值而不是像素。使用百分比值将#order_link相对于窗口的宽度定位，与像素相对。所以，替换它;

$('#order_link').css({"position":"fixed", "right": "290px", "top": "-20px"});

有了这个;

$('#order_link').css({"position":"fixed", "right": "5%", "top": "-20px"});

请注意，right属性的值已替换为percent (5%)而非pixel (290px)。当然，如果需要，您可以指定不同的百分比值。