внешний прокрутка jQuery не работает

Я пытаюсь сделать липкую верхнюю панель навигации, которая следует за экраном, когда она достигает верхней части страницы. В основном, когда он достигает верхней части страницы, позиция изменяется от относительно фиксированной.внешний прокрутка jQuery не работает

Мой код работает, когда я включаю jScript внутри тела HTML-кода. Я новичок в использовании jQuery, поэтому, если вы, ребята, можете мне помочь.

Вот мой HTML:

<html> 
<head> 
    <title></title> 
    <link href="main-style.css" rel="stylesheet" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script type="text/javascript" src="sticky_nav.js"></script> 
</head> 
<body> 
     <header class="banner"> 
      <div class="logo"></div> 
      <div class ="contact-info"> 
       <div class="fb"></div> 
      </div> 
     </header> 
     <nav class="top-nav" id="top-nav"> 
     </nav> 
     <div class="main"> 
     </div> 
</body> 
</html>

Вот мой CSS:

body { 
    padding-top: 450px; 
    background-image: url(background.jpg); 
} 

.banner { 
    left: 50%; 
    margin: 0 0 0 -25%; 
    position: fixed; 
    top: 0px; 
    height: 475px; 
    width: 950px; 
    z-index: -10; 
    background-image: url(img4.jpg); 
} 

.top-nav { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    background: #F0742F; 
    width: 950px; 
    height: 70px; 
    z-index: 20; 
    margin-bottom: -60px; 
    box-shadow: 0 5px 3px rgba(0,0,0,.4); 
    text-align: center; 
    padding-top: 20px; 
    border-radius: 10px; 
} 

.top-nav a { 
    font: 25px bold; 
    text-decoration: none; 
    color: #FFF; 
    padding-left: 20px; 
} 

.top-nav-scrolled { 
    position: fixed; 
    width: 100%; 
    top: 0; 
    left: 50%; 
    margin: 0 0 0 -25%; 
}

Вот мои ЯШ:

var tn = $(".top-nav"); 
var tns = $(".top-nav-scrolled"); 
var hdr = $('header').height(); 

$(document).ready(function(){ 
    $(window).scroll(function() { 
    if($(this).scrollTop() > (hdr - 20)) { 
      if($(this).scrollTop() > (hdr - 20)) { 
     tn.add(tns); 
    } 
    else { 
     tn.remove(tns); 
    }) 
});

Когда я поставил код JS внутри, между скриптом теги он работает. Поэтому я не уверен, что я делаю неправильно.

источник

2015-03-26 wuduyathink

Как вы определили, то 'sticky_nav.js' должен находиться в той же папке, что и HTML-файл (Check F12-> Сеть, чтобы узнать, загружен ли сценарий). Кстати, вы не должны изменять все стили с помощью скрипта, просто добавлять/удалять класс и определять класс в CSS. В вашем случае вы можете пойти с: 'tn.toggleClass ('fixed_element', $ (this) .scrollTop()> (hdr - 20))'; – skobaljic

Aff Теперь я вижу, что ваши константы переменной 'tn',' tns' и 'hdr' находятся внутри функции готовности к документу (эти элементы не существуют во времени, когда выполняется скрипт). – skobaljic

Перемещая переменные внутри функции, ничего не изменило, к сожалению – wuduyathink

Поскольку вы звоните в ваш sticky_nav.js в документе head, то нет элементов кузова еще не существует. Таким образом, ошибка находится в tn, tns и hdr объявлениях: они должны быть внутри функции, готовой к работе.

Кроме того, лучшие праксис бы изменить класс с помощью сценария, определить стили класса с помощью CSS:

$(document).on('ready', function(){ 
    var tn = $(".top-nav"); 
    var hdr = $('header').height(); 
    $(window).on('scroll', function() { 
     tn.toggleClass('top-nav-scrolled', $(this).scrollTop() > (hdr - 20)) 
    }); 
});

источник

2015-03-26 20:47:34 skobaljic

Большое спасибо! Это отлично работает. Просто нужно изменить его размер в моем коде css. – wuduyathink

$(this).scrollTop() > (hdr - 20)

выглядит странно.

Я считаю, что вам нужно кэшировать смещение(). Верхняя часть навигационной панели (потому что она будет динамически изменяться с изменениями позиции), а затем проверить, достигнуто ли оно окном.

var tn = $(".top-nav"); 
var tns = $(".top-nav-scrolled"); 
var hdr = $('header').height(); 
var offset = tn.offset().top; 

$(document).ready(function(){ 
    $(window).scroll(function() { 
     if($(this).scrollTop() > offset) { 
      tn.css("position", "fixed"); 
      tn.css("top", "0"); 
      tn.css("left", "50%"); 
      tn.css("margin","0 0 0 -25%"); 
     } 
     else { 
      tn.css("position", "relative"); 
      tn.removeAttr("left"); 
      tn.removeAttr("top"); 
      tn.removeAttr("margin"); 
     } 
    }) 
});

Нравится это.

А также, вы можете передать простой объект CSS() метод, например:

tn.css({ 
    "position": "fixed", 
    "top": "0" 
});

и так далее.

источник

2015-03-26 20:46:09

внешний прокрутка jQuery не работает

ответ

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