Прокрутите до верхнего скрипта - div не будет прятаться, когда сверху

Question

Прокрутите до верхнего скрипта - div не будет прятаться, когда сверху

0

Я работаю над этим веб-сайтом под названием http://martindue.dk/mmd3x9x/, и у меня есть этот свиток к верхнему скрипту, который просто не будет взаимодействовать. Я использовал сценарий на многих других сайтах, и он отлично работает, но на этом конкретном сайте div # to-top продолжает появляться, даже если я нахожусь на самой вершине веб-сайта, почему не будет он исчезает правильно, когда наверху?

Мой код выглядит так (# top-up вставляется после тега body в моем html):

Javascript

jQuery(document).ready(function() {
    $toTop = jQuery("#to-top");

    $toTop.hide();

    jQuery(window).scroll(function() {
        if(jQuery(this).scrollTop() != 0) {
            $toTop.fadeIn();  
        } else {
            $toTop.fadeOut();
        }    
    });

    $toTop.click(function() {
        jQuery("body, html").animate({ scrollTop : 0 }, 500);
        return false;
    });
});

CSS

#to-top {
    background: url("img/to-top.png") center top no-repeat;
    background-size: 100%;
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 60px;
    right: 60px;
    cursor: pointer;
    /*display:none;*/
    /*opacity: 0.0;*/
}

Я создал эту скрипку, и здесь она отлично работает: http://jsfiddle.net/2Rubp/

Dueify 14 дек. 2013, в 22:56

Источник

0

Я взглянул на твой код скрипки и, похоже, не увидел описанную проблему. Когда я прокрутил вверх, маленький черный ящик исчез, а когда я прокрутил сверху, он появился.
Bob Tate 14 дек. 2013, в 22:12
0

Да, это странная часть, потому что она отлично работает с кодом скрипки, но не на моем реальном сайте. Я предполагаю, что какой-то другой код может поднять его?
Dueify 14 дек. 2013, в 22:13
0

Попробуйте добавить предупреждение, чтобы увидеть, работает ли функция прокрутки вообще, alert ("Scroll Is Working."); ниже появления. Если при прокрутке не появляется оповещение, вы никогда не получаете доступ к функции, и это проблема с вашим jquery (может быть, пропущенный тег где-то выше, который портится с кодом), если он появляется, вы должны быть возникли проблемы с поиском div или что-то
Zach 14 дек. 2013, в 22:18
0

Я попытался изменить код и удалить все с помощью fade-функции, и вместо этого использовать CSS в jQuery (непрозрачность 1/0), и теперь это работает ... странно
Dueify 14 дек. 2013, в 22:22
0

Мое последнее предположение - этот класс .hidden-xs {display: block! Важный; } возится с этим. Я добавил, добавил в скрипку, и он немного с ним винт, но не похоже на ту же проблему, что у вас на вашем сайте
Zach 14 дек. 2013, в 22:39
0

Благодарю. Я постараюсь удалить класс из div и посмотреть, что получится.
Dueify 14 дек. 2013, в 22:49

Показать ещё 4 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Я взглянул на твой код скрипки и, похоже, не увидел описанную проблему. Когда я прокрутил вверх, маленький черный ящик исчез, а когда я прокрутил сверху, он появился.
Да, это странная часть, потому что она отлично работает с кодом скрипки, но не на моем реальном сайте. Я предполагаю, что какой-то другой код может поднять его?
Попробуйте добавить предупреждение, чтобы увидеть, работает ли функция прокрутки вообще, alert ("Scroll Is Working."); ниже появления. Если при прокрутке не появляется оповещение, вы никогда не получаете доступ к функции, и это проблема с вашим jquery (может быть, пропущенный тег где-то выше, который портится с кодом), если он появляется, вы должны быть возникли проблемы с поиском div или что-то
Я попытался изменить код и удалить все с помощью fade-функции, и вместо этого использовать CSS в jQuery (непрозрачность 1/0), и теперь это работает ... странно
Мое последнее предположение - этот класс .hidden-xs {display: block! Важный; } возится с этим. Я добавил, добавил в скрипку, и он немного с ним винт, но не похоже на ту же проблему, что у вас на вашем сайте
Благодарю. Я постараюсь удалить класс из div и посмотреть, что получится.

Julien Altieri · Accepted Answer · 2013-12-14T21-50-00.000Z

Я знаю, что это не js, но в этом случае вы используете только выцветание, поэтому css может сделать трюк:

#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
**-webkit-transition: all 0.5s linear;** 
display: none;
opacity: 0.0;
}

NB: это для хром, см. Это для совместимости с браузером http://www.w3schools.com/css/css3_transitions.asp