Показать/скрыть элемент на прокрутке только с использованием Javascript

Question

Я создаю очень легкую тему wp. На боковой панели есть несколько виджетов, заполняющих только две страницы. Теперь я хочу использовать остальную часть боковой панели, когда виджеты скрыты из виду, когда пользователь прокручивается вниз. Это было бы здорово, особенно если статья очень длинная.

Плавающий элемент с использованием jquery является общим. Как я уже сказал, это должна быть очень легкая тема. jQuery очень тяжелый. Можно ли использовать только javascript, даже просто появляться и исчезать, для отображения элемента на определенной длине страницы?

Примечание: эта тема отзывчива.

[UPDATE] Проблема решена! Спасибо всем.

Я сохранил 100kb + пропускную способность для jQuery.

В качестве ссылки на другие, вот новый сценарий.

<script defer type="text/javascript">var width = window.innerWidth || document.documentElement.clientWidth; 
//Trigger the script only on browser width above 1150px. Recommended on responsive websites 
if (width > 1150){ function testScroll(ev){ 
//Will set the position to FIXED with TOP=80px when user scrolls 850px below. 
if(window.pageYOffset>850){document.getElementById("targetID").style.position = "fixed";document.getElementById("targetID").style.top = "80px";} 
//Will set the position to ABSOLUTE with TOP=AUTO when user scrolls to top just above 850px line 
else {document.getElementById("targetID").style.position = "absolute";document.getElementById("targetID").style.top = "auto";}; 
window.onscroll=testScroll; }; 
</script> 

Answer 1

ПОЛНОСТЬЮ ответьте на свои вопросы вопрос вы можете использовать:

window.onscroll(function() { 
    document.getElementById("target-id").style.display = "block"; 
}); 

Функция запускается при прокрутке окна. Было бы неплохо включить эту функцию в вашу функцию для перетаскивания div, таким образом эта функция не вызывается, если пользователь просто прокручивает страницу. Если вы ищете определенную сумму для прокрутки окна, например «покажите дополнительные div, когда прокручивается окно 400px», для этого здесь есть отличный ответ: Trigger events when the window is scrolled to certain positions

Я рекомендую использовать ссылку I ' для установки позиции, потому что window.scroll вызывается немедленно и может быть не совсем то, что вы ищете.

Answer 2

Если вы не используете какой-либо третьей стороной JavaScript (например, JQuery), а затем использовать его:

document.getElementById('target-id').style.display = 'none'; // hide it 
    document.getElementById('target-id').style.display = 'block'; // show it (for block element, eg: div) 
    document.getElementById('target-id').style.display = 'inline'; // show it (for inline element, eg: span) 

Answer 3

document.getElementById("target-id").style.visibility = "visible"; //To show the element. 

ред ..

вы можете сделать это с помощью регулярного Javascript:

<script> 
function scrollFunction() { 
    document.getElementById("target-id").style.visibility = "hidden"; //To hide the element. 
} 

window.onscroll = scrollFunction; 
</script>