修正了我的響應式設計佈局

my responsive design layout 修正了我的響應式設計佈局

上面的鏈接是我的響應式設計佈局與錨功能固定頭的錯誤。

固定頭的高度根據pc，平板電腦&手機版進行調整。同樣的道理，錨定函數是從固定頭部調整的。錨函數中存在一個錯誤。當我縮小Web瀏覽器的寬度時，標題將變得更高。錨點函數不是自動工作的，我需要點擊F5刷新網頁以激活該功能。我該如何解決這個錯誤？

下面是我的CSS和JS編碼：

var menuContainer = $('header').height(); 

function scrollToAnchor(anchorName) { 
    var aTag = $("div[name='" + anchorName + "']"); 
    $('html,body').animate({ 
    scrollTop: aTag.offset().top - menuContainer 
    }, 'slow'); 
    console.log(anchorName); 
}

CSS編碼

#subnav { 
    height: 100%; 
    margin-right: auto; 
    width: 100%; 
    background-color: #FFFFFF; 
    font-size: 120%; 

} 
#submenu ul { 
    padding: 0; 
    margin-top: 4px; 
    margin-right: auto; 
    margin-left: 0%; 
    margin-bottom: 0; 
    width: 650px; 
} 
#submenu li { 
    float: left; 
} 
#submenu li a { 
    display: inline-block; 
    padding: 10px 20px; 
    text-align: center; 
    text-decoration: none; 
    font-weight: bold; 
    border-right: 1px solid #294C52; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 
.submenu-active { 
    background-color: #294C52; 
    color: #FFFFFF; 
} 
a { 
    color: #294C52; 
}

來源

2015-06-02 Lo Siu Fung

使用'resize'事件偵聽器，並將其放置在'menuContainer = $（'header'）。height（）;'中。這樣，當用戶調整窗口大小時，每次都會計算標題高度。 –

你會給我一個答案嗎？ –

試試我的答案，如果它不起作用告訴我究竟發生了什麼。 –

試試這個：

var menuContainer = $('header').height(); 

function scrollToAnchor(anchorName) { 
    var aTag = $("div[name='" + anchorName + "']"); 
    $('html,body').animate({ 
    scrollTop: aTag.offset().top - menuContainer 
    }, 'slow'); 
    console.log(anchorName); 
} 

$(window).on('resize', function(event) { 
    menuContainer = $('header').height(); 
});

現在取決於當你調用功能上它應該工作。如果您希望它在resize上自動工作，請調用事件處理函數內的函數。

來源

2015-06-02 09:38:11

修正了我的響應式設計佈局

回答

相關問題