Как я могу сделать div fadeIn только при прокрутке вниз?

Я создал функцию прокрутки до вершины, чтобы посетители могли прокручивать вверх, нажав кнопку. Это прекрасно работает. Я также заставил кнопку появляться в свитке.Как я могу сделать div fadeIn только при прокрутке вниз?

То, что мне нужно, должно появляться при прокрутке вниз и исчезнуть при прокрутке вверх. Но в настоящее время он сначала появляется на загрузке страницы, затем fadeOut и снова fadeIn. Как это сделать, только если страница прокручивается вниз?

Вот HTML:

<div> 
    <p> The page's content</p> 
    <div class="scrolltop">  
     <a href="#top" id="scrolltop">Top</a> 
    </div> 
</div>

Вот JQuery:

<script> 
    jQuery("a[href='#top']").click(function() { 
    jQuery("html, body").animate({ scrollTop: 0 }, "slow"); 
    return false; 
}); 
</script> 
    <script> 
jQuery(window).scroll(function() { 

    if (jQuery(this).scrollTop()> 200) 
    { 
     jQuery('.scrolltop').fadeIn(); 
    } 
    else 
    { 
     jQuery('.scrolltop').fadeOut(); 
    } 
}); 
    </script>

Вот CSS-код:

#scrolltop { 
    background-color: orange !important; 
    color:#FFF; 
    color:rgba(255, 255, 255, 0.7); 
    font-size:12px; 
    border-radius: 2px; 
    border: 0; 
    outline: 0; 
    right: 0; 
    bottom: 50px; 
    height: 50px; 
    position: fixed; 
    z-index:9999; 
} 

#scrolltop:hover { 
    opacity: 1.0; 
}

Вот my- fiddle для удобства

источник

2013-12-25 Netizen

Все содержимое и скрипка? +1 –

jsFiddle Demo

довольно просто исправить, просто скрыть ваш скроллер при загрузке.

jQuery('.scrolltop').hide();

Альтернативой будет делать то, что hide делает внутренне, и просто установить этот класс, чтобы скрыть по определению (jsFiddle Demo)

.scrolltop{ 
display: none; 
}

источник

2013-12-25 18:44:15

Привет! Благодарю за быстрое исправление. Как лучше производительность? Скрытие с помощью jQuery 'jQuery ('. Scrolltop'). Hide();'? или css 'display: none;'? – Netizen

@IamSJ - подход css был бы предпочтительнее, потому что ему не нужно ждать, когда 'document.ready' будет запущен, он просто будет выглядеть так. Внутренне все 'hide' делает это, чтобы изменить стиль' display: none', а также добавить некоторые данные в объект jQuery для 'show'. –

добавьте это вам г CSS

.scrolltop { 
    display:none; 
}

Таким образом, ее изначально скрыты и это не распространяется, придется ждать вашего кода, гораздо лучше, чем делать это с JS

источник

2013-12-25 18:43:59

Попробуйте добавить эту строку:

jQuery(document).ready(function() { jQuery('.scrolltop').hide() });

Fiddle

источник

2013-12-25 18:46:00

Как я могу сделать div fadeIn только при прокрутке вниз?

ответ

Смежные вопросы