在網站中實現滾動

我試圖在我的網站上實現jQuery Scrollify插件。然而，這個插件假設我的網站結構只與sections但不是。我的意思是，網站的結構是在網站中實現滾動

<body> 
<div class="mobilenav"> 
    .... 
</div> 
<header id="header"> 
    .... 
</div> 
    <section class="section section1"> Section 1 </section> 
    <section class="section section2"> Section 2 </section> 
    <section class="section section3"> Section 3 </section> 
    <section class="section section4"> Section 4 </section> 
    <section class="section section5"> Section 5 </section> 
<div class="footer"> 
    .... 
</div> 
</body>

這是我如何實現它

$(function() { 
$(".section").css({"height":$(window).height()}); 
    $.scrollify({ 
    section:".section" 
    }); 


    $(".scroll").click(function(e) { 
    e.preventDefault(); 
    $.scrollify("move",$(this).attr("href")); 
    }); 
});

所以，問題是當被加載的網站，當我滾動它只顯示<section> ..它不顯示<header>,<footer>和其他任何未包含在節類中的內容。可以避免這種情況嗎？

來源

2015-07-20 Jason Paddle

如果你還沒有看看[fullPage.js]（http://alvarotrigo.com/fullPage/），我會強烈推薦給你。更多的選擇，並與舊的瀏覽器和觸摸設備兼容。還處理動態滾動和每月提供更新。如果你需要滾動條，只需使用'scrollBar：true'作爲[在這裏]（http://www.alvarotrigo.com/fullPage/examples/scrollBar.html）。 – Alvaro

我會補充說，有自己的代碼，使每個部分的頁面的高度可能會與Scrollifys功能衝突做同樣的事情。所以我會關閉setHeights – bazzlebrush

如果它適用於<section>這很難避免這種情況。

也許只是換你<div>到<section>這樣的：

<section> 
<div> 
</div> 
</section>

你將擁有一切工作好了，你也可以管理所有選項節「選項」

來源

2015-07-20 13:28:14 Direkts

嗯，我不知道爲什麼我沒有考慮只是將這個div換成

標籤。傻我..謝謝這是做的伎倆。 –

任何想法爲什麼'scrollSpeed：1100'不起作用..我在'Option'部分看到了它，但是無論我把它放到什麼位置都沒用？ –

也許'scrollSpeed：1100'不工作，因爲你需要定義'easing'？我不知道，它只是一個盲目的拍攝:) – Direkts

Scrollify段定義描述here在Scrollify的初始化中。它們是用戶定義的，所以它們可以是任何你想要的。

$.scrollify({ 
    section:"this-is-a-css-selector" 
});

關於您的頁眉和頁腳，您可以使用interstitialSection。這將使您的初始化是這樣的：

$.scrollify({ 
    section:".section", 
    interstitialSection:"#header,.footer" 
});

這樣Scrollify仍然會滾動到他們，但不會操縱他們的高度。

來源

2016-06-06 11:35:45

在網站中實現滾動

回答

相關問題