Как прикрепить div при прокрутке? [без JQuery]

Question

[trall]

Хочется, как на rusplt.ru
К шапке добавляется class. Ну а дальше я сам, с помощью CSS. Т.е. мне нужно такую штуку, которая при прокрутке на 100 пикселей добавляет class к div с классом toolbar

Только есть условие - нельзя использовать JQuery

Answer 1

[Eugene Obrezkov]

window.onscroll = function() {
    alert("scroll event detected! " + window.pageXOffset + " " + window.pageYOffset);
    if (window.pageYOffset > 100) {
        document.getElementById('yourElement').classList.add('toolbar');
    }
};

Comments

[trall]

Отлично. А можно сделать так, если пользователь возвращается обратно на эти 100px, то класс убирается?

[Николай Васильчук]

@sashablashenkov Вы удивительный человек. Не можете самостоятельно по аналогии еще одну проверку в приведенный код добавить?

[trall]

@Anonym В этом и проблема. Я сделал, но вместо того, чтобы заменить класс, оно добавляет новый

[Николай Васильчук]

@sashablashenkov Может документацию по classList почитать?

[trall]

@Anonym Уже. Ну сюдя, что вы понимаете что-то в JS, не можете посмотреть в мой код? jsfiddle.net/cnYUm/7

[Николай Васильчук]

@sashablashenkov Доработал ваше решение. Написал ответ ниже.

Answer 2

[Николай Васильчук]

Доработанное решение автора:
jsfiddle.net/Anonym/cnYUm/8

Answer 3

[svd71]

<script>
var t;
function _w_up() { 

  var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
  if(top > 0) { 
    window.scrollBy(0,-50);
    t = setTimeout('_w_up()',2);
  } else clearTimeout(t);
  return false;
}
</script>

<style type="text/css">
.btnUp {
    position: fixed;
    right: 40;
    bottom: 0;
    padding: 10px;
    background: 1 solid #000;
    background-color: #eeeeee;
    color: #000;
    min-width: 20px;
}
</style>
<style>
#__goUp {
	background-image: url(/scrollUp/action/png/goUp);
	background-color:transparent;
	width:50px;
	height:12px;
	
}

</style>
<a  onclick="_w_up();"><div id="__goUp" class="btnUp"  style="visibility:hidden">@@UP@@</div></a> 
<script>
  window.onscroll = function(){ 
  	
            document.getElementById('__goUp').style.visibility = (window.pageYOffset >  0 ? '' : 'hidden');
  }
</script>

Comments

[trall]

Спасибо, но это выглядит как-то сложно :)

[svd71]

только вчера делал такой функционал :-). Работает, как часы https://svddevelop.de/android/tresor/lang/ru/. Можно упростить: выкинуть стиль для показа кнопки.