фиксированный элемент в отзывчивым макете

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: relativediv, а затем сделать эту кнопку, 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). Конечно, вы можете указать другое процентное значение, если хотите.