Проблема с CSS с кнопкой «back-to-top»

Question

Я использовал этот плагин (http://codyhouse.co/gem/back-to-top/), чтобы включить кнопку «back-to-top» на моем сайте.

Я включил эту ссылку только до конца моего тела тегах:

<a href="#0" class="cd-top"></a> 

Это CSS часть:

.cd-top { 
position: fixed; 
background: rgba(34, 34, 34, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; 
visibility: hidden; 
opacity: 0; 
-webkit-transition: opacity .3s 0s, visibility 0s .3s; 
-moz-transition: opacity .3s 0s, visibility 0s .3s; 
transition: opacity .3s 0s, visibility 0s .3s; 
} 
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { 
-webkit-transition: opacity .3s 0s, visibility 0s 0s; 
-moz-transition: opacity .3s 0s, visibility 0s 0s; 
transition: opacity .3s 0s, visibility 0s 0s; 
} 
.cd-top.cd-is-visible { 
/* the button becomes visible */ 
visibility: visible; 
opacity: 0.8; 
} 
.cd-top.cd-fade-out { 
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */ 
opacity: .5; 
} 
.no-touch .cd-top:hover { 
background-color: #515151; 
opacity: 1; 
} 
.cd-top { 
height: 60px !important; 
width: 60px !important; 
right: 280px !important; 
bottom: 50px !important; 

}

Вот JS часть:

jQuery(document).ready(function($){ 
// browser window scroll (in pixels) after which the "back to top" link is shown 
var offset = 300, 
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced 
    offset_opacity = 1200, 
    //duration of the top scrolling animation (in ms) 
    scroll_top_duration = 700, 
    //grab the "back to top" link 
    $back_to_top = $('.cd-top'); 

//hide or show the "back to top" link 
$(window).scroll(function(){ 
    ($(this).scrollTop() > offset) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out'); 
    if($(this).scrollTop() > offset_opacity) { 
     $back_to_top.addClass('cd-fade-out'); 
    } 
}); 

//smooth scroll to top 
$back_to_top.on('click', function(event){ 
    event.preventDefault(); 
    $('body,html').animate({ 
     scrollTop: 0 , 
     }, scroll_top_duration 
    ); 
}); 

}); 

Мне пришлось опубликовать все сообщения i t (извините), потому что я совершенно не знаю, что может быть за моей проблемой. Мое положение: весь мой сайт не реагирует, поэтому позиция содержимого не корректируется (например) при изменении размера окна. Однако эта кнопка есть/делает. Поэтому, когда я уменьшаю ширину окна браузера, кнопка «плавает» по правой стороне, когда она действительно должна быть переполнена им.

Есть ли у кого-нибудь идеи, почему это происходит? Спасибо !!!

Answer 1

.cd-top { 
position: fixed; 

Это ваша проблема. Вы должны сделать это относительным.

Answer 2

«Фиксированный» позиционированный элемент относится к окну просмотра и удаляется из обычного потока.

Fuzzical Logic explained positioning very nicele in this answer

Answer 3

В вашем случае Фрэнк, вы могли бы просто скрыть элемент BTT совсем для маленьких экранов, особенно если ваша страница не очень долго, и пользователь может достичь вершины всего за несколько пальцем пойла.

Если да, то вы могли бы использовать что-то вроде в вашем CSS:

@media only screen and (max-width: 48em) { 

    .cd-top { 
    display:none!important; 
    } 
} 

В качестве альтернативы, вы можете дать ему Z-индекс, если это имеет смысл с остальной частью вашей разметки. Я реализовал обновленную версию этих точных фрагментов. Он отлично работает на гибкой основе, такой как Foundation. CodyHouse делает приятные вещи. Вы должны были увидеть медиа-запрос в оригинальной демонстрации/загрузке, которая слегка корректирует фиксированную позицию.