根據屏幕的寬度更改腳本中的圖形

Question

我只是有以下腳本，如果您照看$('html,body').animate({在第9行，您將看到scrollTop: target.offset().top - 95 }, 700); -問題是，當屏幕寬度小於1030px時，如何更改圖形95 （在offset（）。top XX之后）？

我試圖添加這行代碼並對其進行處理，但是它行不通-我不知道自己在做什么錯。 if (width <= 1030) {

這是腳本：

//Menu Scrolling To Sections//
    $(document).ready(function () {
    $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

    if (target.length) {
        $('html,body').animate({
        scrollTop: target.offset().top - 95 }, 700);
    return false;
    }}});});

Answer 1

解

您需要更改：

if (target.length) {
    $('html,body').animate({
    scrollTop: target.offset().top - 95 }, 700);

至：

if (target.length) {
    var topPadding= 0;
    if($(window).width() >= 1030)
        topPadding = 95;
    $('html,body').animate({
    scrollTop: target.offset().top - topPadding }, 700);

說明

var topPadding= 0; //Sets the default padding to 0 (for when the window is below 1300px)
if($(window).width() >= 1030) //Checks to see if the window width is wider than 1300px
    topPadding = 95; //If it is then set's padding to 95px as in your code above

注意：我將您有95更改為topPadding （將scrollTop設置在此處）