Przyklejane elementy bez jQuery

Question

Witam,

 

Jak wykonać mechanizm przyklejania elementów bez użycia jQuery?

Kod z jQ:

$(document).ready(function() {
   var stickyNavTop = $('aside').offset().top;

   var stickyNav = function(){
   var scrollTop = $(window).scrollTop();

   if (scrollTop > stickyNavTop) {
      $('aside').addClass('sticky');
   } else {
      $('aside').removeClass('sticky');
    }
   };

 

Answer 1

Kolejno z góry na dół (pierw fragment z jQuery, pod spodem "na czysto"):

$(document).ready(function() {

•  przerzucasz skrypt na koniec body, albo owijasz go w event 'DOMContentLoaded'.

var stickyNavTop = $('aside').offset().top;

• sprawdź ten tip: http://stackoverflow.com/a/21880020/4983840

$(window).scrollTop();

• zastosuj metodę window.scrollTo( x-coord, y-coord );

$('aside').addClass('sticky');

• https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
  i metoda add(). Analogicznie dla usunięcia klasy - z tym, że korzystasz wtedy z metody remove() na propertisie classList.

$('aside')

• wszelkie pobieranie elementów z DOM obsłużysz za pomocą document.querySelector()

Comments

• wszelkie pobieranie elementów z DOM obsłużysz za pomocą document.querySelector()

Tylko taka mała uwaga: querySelector() zwraca pierwszy napotkany element pasujący do danego selektora, natomiast aby pozyskać wszystkie zastosuj querySelectorAll().