2013-08-16 3 views
0

Я пытаюсь использовать scrollTo() для того, чтобы сделать div фиксированным после того, как он коснется вершины при прокрутке. вот полный html со сценарием. Я добавил:Метод ScrollTo() не работает

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Untitled Document</title> 
     <script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
     <style> 
      .topnav{ 
       width:100%; 
       background-color:#444; 
       color:#eee; 
       padding:10px; 
       position:relative; 
      } 
     </style> 
     <script> 
      $(window).scroll(function(){ 

       if($('body').scrollTo('.topnav', {offsetTop : '0'})){ 

        $(this).css('position','fixed'); 
        $(this).css('top','0'); 

       } else { 

        $(this).css('position','relative'); 
       } 
      }); 
     </script> 
    <head> 
    <body> 
     <br/> 
     <br/> 
     <br/> 
     <br/> 
     <br/>sdsf 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/> 

     <div class="topnav">topnav</div> 

     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>dfgv<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 

    </body> 
</html> 

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

+0

http://stackoverflow.com/questions/1144805/how-do-i-scroll-to-the-top-of-the-page-with-jquery, он должен помочь вам –

+2

Нет 'scrollTo() 'в jQuery API. Вы имеете в виду 'scrollTop()'? – Mchl

+0

window.scrollTo (x, y) - это функция не только scrollTo. – maverickosama92

ответ

0

После небольшого расследования ясно, что вам не хватает scrollTo() плагин.

<script type='text/javascript' src='http://flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js' /> 

Добавьте это в свой код.

Проверить это в JSFiddle

0

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

См. Здесь рабочие, http://jsfiddle.net/cryostat/UhmNb/.

Чтобы сделать DIV фиксированной, когда это касается верхней части, используйте это:

var fixed = false; 

$(document).scroll(function() { 
    if($(this).scrollTop() >= 100) { 
     if(!fixed) { 
      fixed = true; 
      $('#nav').css({position:'fixed',top:0}); 
     } 
    } else { 
     if(fixed) { 
      fixed = false; 
      $('#nav').css({position:'static'}); 
     } 
    } 
}); 

Для хорошего примера см this.

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