Разделение/прокрутка Div на другой div

Я делаю сайт с навигационной панелью. Эта панель навигации состоит из пяти поколений друг за другом. Он имеет смену изменения позиции прокрутки jQuery, которая работает хорошо.Разделение/прокрутка Div на другой div

$(window).scroll(function(e){ 
      $el = $('.navBar'); 
      if ($(this).scrollTop() > $(window).height()*0.36 && $el.css('position') != 'fixed'){ 
       $('.navBar').css({'position': 'fixed', 'padding-top': '0px'}); 
      } 
      if ($(this).scrollTop() < $(window).height()*0.36 && $el.css('position') == 'fixed') 
      { 
       $('.navBar').css({'position': 'absolute', 'padding-top': $(window).height()*0.38}); 
      } 
     });

Вот HTML код I'am говорить о: (. Каждая коробка имеет, это изображение, которое является фоновым)

<body> 
    <div class="box1"> 
     <div class="navBar"> 
      <div class="test">test</div> 
      <div class="test2">test2</div> 
      <img src="images/Logo/Flat8.png" class="test3"> 
      <div class="test4">test</div> 
      <div class="test4">test</div> 
      <div class="navBarBorder"></div> 
     </div> 
     <img src="images/Cyan.png" class="box1Background"> 
    </div> 
    <div class="box2"> 

     <img src="images/Salmon.png" class="box2Background"> 
    </div> 
    <div class="box3"> 

     <img src="images/Sand.png" class="box3Background"> 
    </div> 
    <div class="box4"> 

     <img src="images/Light-Blue.png" class="box4Background"> 
    </div> 
    <div class="box5"> 

     <img src="images/Black-Blue.png" class="box5Background"> 
    </div> 
</body>

Я хочу это нав-бар в do: Я предпочитаю гладкий свиток с jQuery, когда вы нажимаете на div = class test = 1/2/3/4/5. Я уже провел некоторое исследование, но для меня ничего не работало. Имеет ли изменение статуса изменения прокрутки jQuery какое-либо отношение к нему или я использую неправильные коды для своих намерений?

источник

2015-08-27 Thomas Droog

Вам необходимо изменить свою навигацию, чтобы использовать ссылки, а не div и использовать идентификаторы в целевом div вместо классов. Например:

<div class="navBar"> 
     <a href="#box1">test</a> 
     <a href="#box2">test2</a> 
     <img src="images/Logo/Flat8.png" class="test3"> 
     <a href="#box3">test</a> 
     <a href="#box4">test</a> 
     <div class="navBarBorder"></div> 
    </div>

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

jQuery('.navBar a').click(function(e) { 
    var location = jQuery(this).attr('href'); 

    jQuery('html, body').animate({ 
     scrollTop: jQuery(location).offset().top 
    }, 1200); 

    return false; 
});

источник

2015-08-27 12:35:33

Большое вам спасибо! Потому что мне просто пришлось менять классы для id. –

Вы должны принять это как правильный ответ :) –

Разделение/прокрутка Div на другой div

ответ

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