Создание div фиксировано при достижении вершины окна

Question

Я нашел решения для этого и последовал за ними, но не получил его на работу, пока не попробовал его в этом jsfiddle. Так или иначе, он работает в jsfiddle, но не в моем проекте. Для меня главное исчезает, когда я прокручиваю вниз по высоте окна. Это использование js im. остальная часть кода находится в jsfiddle. Что мне не хватает?

$(function(){ 
    $(window).load(function(){ // On load 
     $('main').css({'height':($(window).height())}); 
     $('main').css({'margin-top':($(window).height())}); 
    }); 
    $(window).resize(function(){ // On resize 
     $('main').css({'height':($(window).height())}); 
    }); 
}); 


$(document).ready(function() { 
    var s = $("main"); 
    var pos = s.position();      
    $(window).scroll(function() { 
     var windowpos = $(window).scrollTop(); 
     if (windowpos > $(window).height()) { 
      s.addClass("stick"); 
     } else { 
      s.removeClass("stick"); 
     } 
    }); 
}); 

Редактировать: Видимо, добавление важности для .stick в css заставляет его работать. почему мне это не нужно в jsfiddle?

Answer 1

Это связано с тем, что при загрузке страницы вы назначаете атрибут стиля вашему «главному» div. Атрибуты стиля имеют более высокую специфичность, чем атрибут селектора, установленный в вашем css.

Поэтому, когда вы добавляете класс «stick», атрибут «margin-top» не переопределяется, поскольку он уже назначен атрибутом стиля, который является более конкретным.

Добавление важного свойства 'margin-top' заставляет его быть наиболее релевантным.