停止滾動在某個點

即時通訊有一個問題，使一個div停止滾動在某個點。我看過其他的解決方案，但我不能讓它在我的工作。任何人都在仔細觀察並告訴我我做錯了什麼？停止滾動在某個點

我的代碼的：

var windw = this; 
 

 
$.fn.followTo = function(pos) { 
 
    var $this = this, 
 
    $window = $(windw); 
 

 
    $window.scroll(function(e) { 
 
    if ($window.scrollTop() > pos) { 
 
     $this.css({ 
 
     position: 'absolute', 
 
     top: pos 
 
     }); 
 
    } else { 
 
     $this.css({ 
 
     position: 'fixed', 
 
     top: 0 
 
     }); 
 
    } 
 
    }); 
 
}; 
 

 
$('#header').followTo(250);

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
/*Index*/ 
 

 
#index { 
 
    background-image: url(../img/metallica/Metallica_London_2008-09-15_Kirk_and_JamesBL.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: center 10; 
 
    background-attachment: fixed; 
 
} 
 
#venstre { 
 
    float: left; 
 
} 
 
#midt { 
 
    float: left; 
 
} 
 
#header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    height: auto; 
 
} 
 
#header a { 
 
    list-style-type: none; 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive; 
 
    font-size: 60px; 
 
    float: left; 
 
    margin-top: 32px; 
 
    margin-left: 40px; 
 
    margin-right: 650px; 
 
    position: relative; 
 
} 
 
#header form { 
 
    float: right; 
 
    margin-top: 26px; 
 
    margin-right: 49px; 
 
} 
 
#righto { 
 
    float: right; 
 
} 
 
#lefto { 
 
    float: left; 
 
} 
 
#Wrapper { 
 
    clear: both; 
 
} 
 
.anker { 
 
    width: 67px; 
 
    height: 52px; 
 
    padding: 10px; 
 
    margin-left: 147px; 
 
    margin-top: 207px; 
 
    float: left; 
 
    position: fixed; 
 
} 
 
.anker a { 
 
    text-decoration: none; 
 
    text-align: center; 
 
} 
 
.anker ul li { 
 
    list-style-type: none; 
 
} 
 
.undercirkel { 
 
    margin-top: 0; 
 
    margin-left: 20px; 
 
    list-style-type: none; 
 
} 
 
.undercirkelt { 
 
    margin-top: 0; 
 
    margin-left: 800px; 
 
    list-style-type: none; 
 
} 
 
.box { 
 
    background-color: #FFFFFF; 
 
    float: left; 
 
    width: 700px; 
 
    height: 390px; 
 
    margin-left: 428px; 
 
    margin-top: 187px; 
 
    opacity: 0.4; 
 
    z-index: -1; 
 
} 
 
.boxt { 
 
    background-color: #FFFFFF; 
 
    float: left; 
 
    width: 700px; 
 
    height: 390px; 
 
    margin-left: 428px; 
 
    opacity: 0.4; 
 
    z-index: -1; 
 
} 
 
.dropdown { 
 
    width: auto; 
 
    float: left; 
 
    position: fixed; 
 
    margin-top: 190px; 
 
} 
 
.dropdown a { 
 
    text-decoration: none; 
 
    color: #FFFFFF; 
 
    font-family: 'Cinzel', serif, 'Cinzel Decorative', cursive; 
 
    text-align: center; 
 
    font-size: 18px; 
 
    margin: 2px 0 2px 0; 
 
} 
 
.dropdown a:hover { 
 
    color: #282828; 
 
} 
 
.dropdown ul a { 
 
    display: block; 
 
} 
 
.dropdown ul { 
 
    list-style-type: none; 
 
    margin: 0 auto; 
 
} 
 
.drop { 
 
    background-color: #393939; 
 
    border: #D4D4D4; 
 
} 
 
.drop li:hover { 
 
    background-color: #808080; 
 
    border: #D4D4D4; 
 
} 
 
.undermenu { 
 
    display: none; 
 
} 
 
.undermenu li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    margin-left: 50px; 
 
} 
 
.undermenu li { 
 
    clear: both; 
 
    background-color: #393939; 
 
} 
 
.dropdown li:hover .undermenu { 
 
    display: block; 
 
    position: absolute; 
 
} 
 
.dropdown li:hover .undermenu li { 
 
    float: left; 
 
    font-size: 13px; 
 
} 
 
.dropdown ul li ul li a { 
 
    padding-left: 10px !important; 
 
    padding-right: 10px !important; 
 
    padding-top: 0px !important; 
 
    padding-bottom: 0px !important; 
 
} 
 
#right { 
 
    width: 300px; 
 
    background-color: #FFFFFF; 
 
    float: right; 
 
    margin-right: 52px; 
 
    margin-top: 200px; 
 
    position: fixed; 
 
    margin-left: 1250px; 
 
    opacity: 0.4; 
 
} 
 
#right img { 
 
    padding: 15px; 
 
} 
 
.footer { 
 
    clear: both; 
 
}

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Rockentusiasterne</title> 
 
    <link rel="stylesheet" type="text/css" href="../css/main.css"> 
 
    <link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'> 
 
    <script src="../js/jquery-2.1.1.min.js"></script> 
 
    <script src="../js/js.js"></script> 
 
    <script> 
 
    var windw = this; 
 

 
    $.fn.followTo = function(pos) { 
 
     var $this = this, 
 
     $window = $(windw); 
 

 
     $window.scroll(function(e) { 
 
     if ($window.scrollTop() > pos) { 
 
      $this.css({ 
 
      position: 'absolute', 
 
      top: pos 
 
      }); 
 
     } else { 
 
      $this.css({ 
 
      position: 'fixed', 
 
      top: 40 
 
      }); 
 
     } 
 
     }); 
 
    }; 
 

 
    $('#scrollto-menu-nav').followTo(250); 
 
    </script> 
 
</head> 
 

 
<body id="index"> 
 
    <div id="header"> 
 
    <div id="lefto"><a href="index.html">Rockentusiasterne</a> 
 
    </div> 
 
    <div id="righto"> 
 
     <form> 
 
     <label> 
 
      <img src="../img/search.png"> 
 
     </label> 
 
     <input type="search" name="search" placeholder="Søg"> 
 
     </input> 
 
     </form> 
 
    </div> 
 
    </div> 
 
    <div id="Wrapper"> 
 
    <div id="left"> 
 
     <div class="dropdown"> 
 
     <ul> 
 
      <div class="drop"> 
 
      <li><a href="#">Forside</a> 
 
      </li> 
 
      </div> 
 
      <div class="drop"> 
 
      <li><a href="#">Genrer</a> 
 
       <ul class="undermenu"> 
 
       <li><a href="#">Rock'n'Roll</a> 
 
       </li> 
 
       <li><a href="#">Alternativ musik</a> 
 
       </li> 
 
       <li><a href="#">Grunge</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </div> 
 
      <div class="drop"> 
 
      <li><a href="#">Om os</a> 
 
      </li> 
 
      </div> 
 
      <div class="drop"> 
 
      <li><a href="#">Forum</a> 
 
       <ul class="undermenu"> 
 
       <li><a href="#">Opret bruger</a> 
 
       </li> 
 
       <li><a href="#">FAQ</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </div> 
 
      <div class="drop"> 
 
      <li><a href="#">Kontakt os</a> 
 
      </li> 
 
      </div> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div id="innerwrapper"> 
 
     <div id="midt"> 
 
     <div class="anker"> 
 
      <ul> 
 
      <li> 
 
       <a href="#1"> 
 
       <img src="../img/cirkel.png"> 
 
       </a> 
 
      </li> 
 
      <div class="undercirkel"> 
 
       <li> 
 
       <img src="../img/undercirkel.png"> 
 
       </li> 
 
      </div> 
 
      <div class="undercirkel"> 
 
       <li> 
 
       <img src="../img/undercirkel.png"> 
 
       </li> 
 
      </div> 
 
      <li> 
 
       <a href="#2"> 
 
       <img src="../img/cirkel.png"> 
 
       </a> 
 
      </li> 
 
      <div class="undercirkel"> 
 
       <li> 
 
       <img src="../img/undercirkel.png"> 
 
       </li> 
 
      </div> 
 
      <div class="undercirkel"> 
 
       <li> 
 
       <img src="../img/undercirkel.png"> 
 
       </li> 
 
      </div> 
 
      <li> 
 
       <a href="3"> 
 
       <img src="../img/cirkel.png"> 
 
       </a> 
 
      </li> 
 
      <div class="undercirkel"> 
 
       <li> 
 
       <img src="../img/undercirkel.png"> 
 
       </li> 
 
      </div> 
 
      <div class="undercirkel"> 
 
       <li> 
 
       <img src="../img/undercirkel.png"> 
 
       </li> 
 
      </div> 
 
      <li> 
 
       <a href="4"> 
 
       <img src="../img/cirkel.png"> 
 
       </a> 
 
      </li> 
 
     </div> 
 
     <div class="box"> 
 
      <a name="1"></a> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 
     <div class="undercirkelt"> 
 
      <li> 
 
      <img src="../img/undercirkelt.png"> 
 
      </li> 
 
     </div> 
 

 
     <div class="boxt"> 
 
      <a name="2"></a> 
 
     </div> 
 
     </div> 
 
     <div id="right"> 
 
     <img src="../img/metallica/Metallica-on-Howard-Stern-Show-Wallpaper.png" width="81" height="60"> 
 
     </div> 
 
     <div class="footer"></div> 
 

 
</body> 
 

 
</html>

來源

2014-10-09 Magnolia

取消綁定滾動事件。類似於

$(window).unbind('scroll');

希望這會有所幫助。

來源

2014-10-09 08:33:59 Abhishek

你會把它放在哪裏？ – Magnolia 2014-10-09 09:27:57

滾動功能內的任何位置。在跟隨到250之後，他不想滾動更好的解除綁定或者需要在window.scroll函數內添加額外的邏輯（如果else語句）以在特定條件下解除綁定。 – Abhishek 2014-10-09 09:40:08

停止滾動在某個點

回答

相關問題