如何使我的本地滾動偏移量與此固定標題一起工作？

Question

因此，我已經用zurb Foundation的響應模板設計了這個網站幾天了……作為最后決定，我決定固定標題#header……除了內容在每個滾動條的標題下方滑動之外，其他所有操作都相同事件。

我一生都無法弄清楚如何使膠印正確工作？！？！

我正在像這樣使用jQuery localscroll插件

$.localScroll({hash:true, offset: {top: 65},duration: 1000,easing:'easeInOutExpo'});

我嘗試將偏移量：{top：}參數更改為60和-60，但是我嘗試的任何操作最多只能使我回想起不穩定的動畫：-/

所以...我想也許我可以只留下.js並通過使用CSS將面板下移來修復它。 還是#main容器？...但是，不行。。。

因此，我正在尋找一種方法來修復本地滾動偏移量...或...以某種方式將所有內容下移以適應#header？

此處可能存在沖突的文件：

http://example.com/javascripts/foundation/jquery.offcanvas.js
http://example.com/js/main2.js
http://example.com/index.php

Answer 1

offset的語法為：

offset: -50

不：

offset {top:50}

這可能是問題所在。

Answer 2

只需在每張幻燈片的頂部添加填充即可解決...不是我所想象的...但是可以！ :)

Answer 3

使用scrollTo和固定的topbar（使用Foundation或Bootstrap）時，我遇到了相同的問題。 除了嘗試其他插件外，我還嘗試了很多css和javascript解決問題，但徒勞無功。 滾動元素的高度是一個問題，當頂部欄固定時，滾動元素會被修改。

但是，我已經達到了一個解決方案（使用Foundation），該解決方案（使用Foundation）：我沒有使用"sticky"類，而是使用了"fixed"類，因此已經考慮了頁面頂部的頂部欄。

Answer 4

好吧，如果您確實想使用“粘性”類，則可以找到解決方案。

由於只有一張幻燈片有問題，因此我僅將解決方案應用於該特定鏈接。 但是您可以對所有鏈接執行此操作，只需更改$ scrollLink選擇器即可。

每當鼠標移到鏈接上時，代碼都會檢查div.sticky（為我添加了ID＃top-bar-container）是否具有“固定”類。 如果返回true，則將localScroll函數設置為所需的偏移量。

$('#primaryNav .top-bar-section li.problemLi a').hover(function(){
    var $scrollLink = $('#primaryNav .top-bar-section li.problemLi a');
    var $menuFixed = $('#top-bar-container').hasClass('fixed');
    if ( $menuFixed == true ) {
        $scrollLink.localScroll({
            duration: 800,
            offset: -40
        }); 
    } else {
        $scrollLink.localScroll({
            duration: 800,
            offset: -135
        }); 
    }
});

Answer 5

我遇到了同樣的問題，即使修復了語法，也無法使localScroll工作。 我最終切換到另一個工具[SmoothScroll]： https : //github.com/cferdinandi/smooth-scroll#readme

太好了 試試吧。