Как исправить боковую панель на свитке?

Question

Я использую эту функцию JavaScript, чтобы сделать правой боковой панели фиксированной:

<script type="text/javascript"> 
$(document).ready(function() { 
    var top = $('#rightsidebar-wrapper').offset().top - parseFloat($('#rightsidebar-wrapper').css('marginTop').replace(/auto/, 0)); 
    $(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) { 
      // if so, ad the fixed class 
      $('#rightsidebar-wrapper').addClass('fixed'); 
     } else { 
      // otherwise remove it 
      $('#rightsidebar-wrapper').removeClass('fixed'); 
     } 
    }); 
}); 
</script> 

И это CSS, чтобы стиль rightsidebar DIV:

#rightsidebar-wrapper { 
    background: #ffffff; 
    width: 225px; 
    float: right; 
    margin-top: 8px 0px 0 0; 
    padding:0px; 
    word-wrap: break-word; 
    overflow: hidden; 
} 

#rightsidebar-wrapper.fixed { 
    position: fixed; 
    top: 5px; 

}

Это боковая панель помещены справа. Проблема в том, что когда верхняя часть боковой панели соответствует верхнему краю экрана при прокрутке, он получает поплавки влево. При добавлении этого в CSS

right: 10%; 

это устраняет проблему, но когда страница наезда или Увеличенный выход снова теряет свои позиции. Любая идея, как это исправить?

Answer 1

Это потому, что положение: фиксированное из организма с поплавком. Пожалуй, вам нужно полностью установить позицию JavaScript. Вы можете использовать $ (window) .resize(), чтобы исправить проблему увеличения/уменьшения.

Answer 2

Я знаю, что это сообщение слишком устарело, но я надеюсь, что кто-то в будущем ищет этот ответ БЕЗ Bootstrap может показаться ему полезным. Он также работает на быстро реагирующем сайте.

Для начала создайте div со следующими свойствами css.

#scroll_to{ 
    padding: 25px; 
    display: inline-block; 
    float: right; 
    background-color: #eeeeee; 
} 

Он будет создавать плавающий блок в правой части окна.

Затем примените этот JS-код к вашему div, и он будет работать.

Примечание: Пожалуйста, установите значение top: в соответствии с вашим заголовком панелью

var div_pos= $('#scroll_to').position().top; 
$(document).on('scroll', function() { 
    var scroll_top= $(this).scrollTop(); 
    if(scroll_top>=div_pos){ 
     console.log("fix"); 
     $('#scroll_to').css({ 
      'position': 'fixed', 
      'right': '0', 
      'top': '36px' 
     }); 

    }else{ 
     $('#scroll_to').css({ 
      'position': '', 
      'right': '', 
      'top': '36px' 
     }); 
    } 
});