1. 首頁
  2. 問答
  3. 滾動以解決滾動問題

滾動以解決滾動問題

2015-04-08 49 views
0

我正在面對滾動問題以修復大篇文章。插件可以在這裏找到：https://github.com/bigspotteddog/ScrollToFixed。這種情況是我不想在文章的頂部固定一些文章編號。當我向下滾動時，數字必須在下一篇文章到達時向上滾動。下降的方式非常好，彼此之間沒有差距或數字。但是當我慢慢滾動時，在我的滾動中出現了一些間隙，滾動不正常。當我滾動速度非常快時，數字就結束了。滾動以解決滾動問題

我的腳本：

$(document).ready(function() { 
// Dock each summary as it arrives just below the docked header, pushing the 
// previous summary up the page. 

    var articleblocknr = $('.gwn_betnr'); 
    articleblocknr.each(function(i) { 
     var block = $(articleblocknr[i]); 
     var next = articleblocknr[i + 1]; 

     block.scrollToFixed({ 
      //marginTop: $('.header').outerHeight(true) + 10, 
      limit: function() { 
       var limit = 0; 
       if (next) { 
        limit = $(next).offset().top - $(this).outerHeight(true); 
       } else { 
        limit = $('.footer').offset().top - $(this).outerHeight(true); 
       } 
       return limit; 
      }, 
      zIndex: 999 
     }); 
    }); 
});

我的頁面的文章：

<li id="gwn_betnr1" class="gwn_betnr"> 

     <span class="gwn_betnrf">1</span> 

    </li> 

    <li class="gwn_bet"> 

     <span class="gwn_def gwn_illus">Definition 1</span> 

     <span class="gwn_bet_beh"> 

      <span class="gwn_regel"> 

       <span class="gwn_grijs">test1 </span> 

       <span class="gwn_steun">test2</span> 

      </span> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> 

      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p> 

     </span> 

    </li> 

    <li id="gwn_betnr2" class="gwn_betnr"> 

     <span class="gwn_betnrf">2</span> 

    </li> 

    <li class="gwn_bet"> 

     <span class="gwn_def gwn_illus">Definition 2</span> 

     <span class="gwn_bet_beh"> 

      <span class="gwn_regel"> 

       <span class="gwn_grijs">test1 </span> 

       <span class="gwn_steun">test2</span> 

      </span> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> 

      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p> 

     </span> 

    </li> 

    <li id="gwn_betnr3" class="gwn_betnr"> 

     <span class="gwn_betnrf">3</span> 

    </li> 

    <li class="gwn_bet"> 

     <span class="gwn_def gwn_illus">Definition 3</span> 

     <span class="gwn_bet_beh"> 

      <span class="gwn_regel"> 

       <span class="gwn_grijs">test1 </span> 

       <span class="gwn_steun">test2 </span> 

      </span> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> 

      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p> 

     </span> 

    </li> 

    <li id="gwn_betnr4" class="gwn_betnr"> 

     <span class="gwn_betnrf">4</span> 

    </li> 

    <li class="gwn_bet"> 

     <span class="gwn_def gwn_illus">Definition 4</span> 

     <span class="gwn_bet_beh"> 

      <span class="gwn_regel"> 

       <span class="gwn_grijs">test1 </span> 

       <span class="gwn_steun">test2 </span> 

      </span> 

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> 

      <p>Vivamus fermentum semper porta. Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum </p> 

     </span> 

    </li> 
<div class="footer"> 
      ... 
</div>

我的CSS：

body, html { margin:0; padding:0; color:#2a2a2a; background:#fff; } .footer { display: block; background:#f2f2f2; clear: both; } .gwn_romp { list-style: none; padding: 0px; margin: 0px; } .gwn_betnr { float:left; width:1.250em; height: 2.300em; text-align: center; font-weight: bold; border-top: 1px solid black; /*padding-top: 0.450em;*/ /* 28px - 19px (l2b) = 9px */ overflow: hidden; } .gwn_bet { float: left; margin-left: 1.400em; } .gwn_def { display: block; color: #000; } .gwn_bet_beh { display: block; } .gwn_regel { display: block; /* clear: both; */ }

有人可以幫我解決這個問題？我也做了一個小提琴，向下滾動工作正常，滾動在開關上，數字不平滑。 https://jsfiddle.net/45ab7pka/4/

來源

2015-04-08 Haidy

+0

奇，適用於Firefox的罰款，但我看到在其他瀏覽器的問題。 – Shikkediel

+0

我在Firefox中看到翻轉。數字1和2之間一切正常。上下滾動。但是當我在2和3之間。然後非常慢地向上滾動，它翻轉了一下滾動。當我快速滾動時，數字會彼此超越。 – Haidy

+1

是的，我現在注意到了。這個小小的跳躍只發生在上升的第一個數字時。但讓我們看看答案提供了什麼... – Shikkediel

回答

0

我的理解是，當你向上滾動時你有問題，所以我在其他條件中對你的代碼做了一些修改，我已經對你的小提琴代碼做了修改，可能這會幫助你，鏈接在下面。

fiddle code here      
https://jsfiddle.net/45ab7pka/4/

來源

2015-04-08 12:32:50

+0

你做了哪些改變？我從我的小提琴看到相同的鏈接？按jsFiddle更新併發布新鏈接？ – Haidy

+0

好了，然後只需將下面的代碼放在你的小提琴代碼中的javascript部分... –

0 
$(document).ready(function() { console.log('test'); 
    // Dock each summary as it arrives just below the docked header, pushing the 
    // previous summary up the page. 

    var articleblocknr = $('.gwn_betnr'); 
    articleblocknr.each(function(i) { 
     var block = $(articleblocknr[i]); 
     var next = articleblocknr[i + 1]; 

     block.scrollToFixed({ 
      //marginTop: $('.header').outerHeight(true) + 10, 
      limit: function() { 
       var limit = 0; 
       if (next) { 
        5 = $(next).offset().top - $(this).outerHeight(true); 
       } else { 
        limit = $('.footer').offset().top - $(this).outerHeight(true); 
       } 
       return limit; 
      }, 
      zIndex: 999 
     }); 
    }); 
});

來源

2015-04-08 12:39:26

+0

我看到的唯一變化是你已將「限制」更改爲「5」？ else語句中沒有改變？所以同樣的錯誤是在這個代碼的小提琴。 – Haidy

+0

是的，它的工作.... –

相關問題

 相關問題