將CSS面板更改爲100％寬度會創建跳動的jQuery滾動

Question

我試圖鏈接導航欄列表項以將滾動過渡到頁面上的特定面板。使得調整的CSS，使所有面板背景（.maincontent）100％的頁面寬度的滾動效應不再工作。經過

CSS：

/****Landscape****/ 
/*global styles*/ 

.body { 
    width: 100%; 
    margin: 0; 
    list-style: none; 
    text-decoration: none; 
    font-size: 1.05em; 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
} 

a { 
    appearance: none; 
    font-size: 1.05em; 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
    background: transparent; 
    color: #000000; 
    border: none; 
    letter-spacing: 0.15em; 
    text-transform: uppercase; 
    transition: color 0.5s ease; 
    list-style: none; 
    text-decoration: none; 
} 

a:focus, 
a:hover { 
    color: #e6e8eb; 
    cursor: pointer; 
    transition: color 0.5s ease; 
    width: inherit; 
    right: 0; 
    left: 0; 
} 

a:active { 
    color: #484747; 
} 
/*----/----global styles*/ 
/*Maincontent*/ 

.maincontent { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    font-size: 1.05em; 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
} 
/*----/----Maincontent*/ 
/*contact panel*/ 

.letmeknow:hover { 
    color: #464c4c; 
    cursor: pointer; 
    transition: color 0.5s ease; 
} 

.letmeknow { 
    appearance: none; 
    width: 80%; 
    height: 50px; 
    font-size: 1.05em; 
    background: transparent; 
    color: #e6e8eb; 
    border: none; 
    letter-spacing: 0.15em; 
    text-transform: uppercase; 
    transition: color 0.5s ease; 
    outline: none; 
    border: none; 
} 
/*Contact submit Form*/ 

#container { 
    width: 840px; 
    margin: 25px auto; 
} 

.whysign { 
    float: left; 
    background-color: white; 
    width: 480px; 
    height: 347px; 
    border-radius: 0 5px 5px 0; 
    padding-top: 20px; 
    padding-right: 20px; 
} 

.signup { 
    float: left; 
    width: 300px; 
    padding: 30px 20px; 
    background-color: white; 
    text-align: center; 
    border-radius: 5px 0 0 5px; 
} 

[type=text] { 
    display: block; 
    margin: 0 auto; 
    width: 80%; 
    border: 0; 
    border-bottom: 1px solid rgba(0, 0, 0, .2); 
    height: 45px; 
    line-height: 45px; 
    margin-bottom: 10px; 
    font-size: 1em; 
    color: rgba(0, 0, 0, .4); 
} 

input[type="submit"] { 
    appearance: none; 
    width: 80%; 
    height: 50px; 
    font-size: 1.05em; 
    background: transparent; 
    color: #e6e8eb; 
    border: none; 
    letter-spacing: 0.15em; 
    text-transform: uppercase; 
    transition: color 0.5s ease; 
    outline: none; 
    border: none; 
} 

input[type="submit"]:hover { 
    color: #464c4c; 
    cursor: pointer; 
    transition: color 0.5s ease; 
} 

[type='text']:focus { 
    outline: none; 
    border-color: #53CACE; 
} 

span:hover { 
    color: #53CACE; 
} 
/*----/----contact form*/ 
/*Nav Bar*/ 

.header { 
    background: #ffffff; 
    width: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 99999; 
} 

.nav { 
    background: #ffffff; 
    float: right; 
    text-align: right; 
} 

.nav > li { 
    display: inline-block; 
    padding: 2px; 
    padding-right: 30px; 
} 
/*----/----Nav Bar*/ 
/*Panels*/ 

.panel { 
    width: 100%; 
    background: #000000; 
    color: #ffffff; 
    height: 40em; 
    padding: 3em; 
} 

.links { 
    color: #ffffff; 
} 

.panel .inner { 
    padding-top: 10%; 
    color: #df 
} 

.panel.panel-blank { 
    background: #ffffff; 
    color: #000000; 
} 
/*----/----Panels*/ 
/*logo*/ 

.logo { 
    float: left; 
    display: inline-block; 
    width: 15px; 
    height: 15px; 
    padding: 18px; 
    cursor: pointer; 
} 
/*----/----logo*/ 
/****Portrait****/ 

@media (max-width: 850px) { 
    /*global styles*/ 

    .body { 
    width: 100%; 
    margin: 0; 
    list-style: none; 
    text-decoration: none; 
    } 
    .header { 
    background: #ffffff; 
    width: 100%; 
    position: fixed; 
    top: 0; 
    left: 0; 
    } 
    .nav { 
    position: fixed; 
    width: 100%; 
    text-align: center; 
    display: none; 
    background-color: #ffffff; 
    left: 0; 
    top: 39px; 
    } 
    .nav > li { 
    postition: absolute; 
    display: block; 
    left: 0; 
    width: 100%; 
    padding-top: 0.6em; 
    padding-bottom: 1em; 
    } 
    .nav > li:hover { 
    postition: absolute; 
    display: block; 
    left: 0; 
    width: 100%; 
    padding-top: 0.6em; 
    padding-bottom: 1em; 
    cursor: pointer; 
    } 
    /*----/----global styles*/ 
    /*logo*/ 

    .logo { 
    float: left; 
    display: block; 
    width: 15px; 
    height: 15px; 
    padding: 18px; 
    cursor: pointer; 
    } 
    /*----/----logo*/ 
    /*navigation icon*/ 

    #toggle-menu { 
    float: right; 
    display: block; 
    width: 15px; 
    height: 15px; 
    padding: 20px; 
    } 
    #toggle-menu div { 
    width: 15px; 
    height: 15px; 
    position: relative; 
    } 
    #toggle-menu span { 
    display: block; 
    width: 15px; 
    height: 3px; 
    background: black; 
    position: absolute; 
    -webkit-transition: -webkit-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
    -moz-transition: -moz-transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
    transition: transform 0.2s ease-in-out, top 0.2s ease-in-out 0.2s, opacity 0.2s ease-in-out 0.2s; 
    -webkit-transform-origin: center; 
    -moz-transform-origin: center; 
    transform-origin: center; 
    } 
    #toggle-menu span.top { 
    top: 0px; 
    } 
    #toggle-menu span.middle { 
    top: 6px; 
    } 
    #toggle-menu span.bottom { 
    top: 12px; 
    } 
    /*----/----navigation icon*/ 
    /*navigation icon animation*/ 

    #toggle-menu.menu-is-active span { 
    -webkit-transition: -webkit-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    -moz-transition: -moz-transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    transition: transform 0.2s ease-in-out 0.2s, top 0.2s ease-in-out, opacity 0.2s ease-in-out; 
    } 
    #toggle-menu.menu-is-active span.top, 
    #toggle-menu.menu-is-active span.middle { 
    top: 6px; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
    } 
    #toggle-menu.menu-is-active span.middle { 
    opacity: 0; 
    } 
    #toggle-menu.menu-is-active span.bottom { 
    top: 6px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    } 
    /*----/----navigation icon animation*/ 
} 
/*----/----Portrait*/ 

的jQuery：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 

jQuery(document).ready(function() { 
$(window).resize(function(){ 
    if ($(window).width() >=850) { 
     $(".nav").show(); 
    } 
    else{ $(".nav").hide();} 
}); 
$('#toggle-menu').click(function() { 

    $(this).toggleClass('menu-is-active') 

}); 

/* click outside of nav to trigger navigation icon animation*/ 
$(document).click(function() { 
    $("#toggle-menu").removeClass(); 
}); 
$("nav").click(function (e) { 
    e.stopPropagation(); 
    return false; 
}); 

/*----/----navigation icon animation*/ 

/*toggle menu*/ 
jQuery("#toggle-menu").click(function() { 
    jQuery(".nav").slideToggle(); 
}); 
/* click outside of nav to close toggle*/ 
$(document).click(function() { 

    if ($(window).width() < 850) { 
     $(".nav").hide(); 
    } else { 
     $(".nav").show(); 
    } 
}); 
$("#toggle-menu").click(function (e) { 
    e.stopPropagation(); 
    return false; 
}); 
/*----/----toggle menu*/ 

/*Jump Scroll*/ 
$(function() { 
var $window = $(window), $document = $(document), 
    transitionSupported = typeof document.body.style.transitionProperty === "string", // detect CSS transition support 
    scrollTime = 1; // scroll time in seconds 

$(document).on("click", "a[href*=#]:not([href=#])", function(e) { 
    var target, avail, scroll, deltaScroll; 

    if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") && location.hostname == this.hostname) { 
     target = $(this.hash); 
     target = target.length ? target : $("[id=" + this.hash.slice(1) + "]"); 

     if (target.length) { 
      avail = $document.height() - $window.height(); 

      if (avail > 0) { 
       scroll = target.offset().top; 

       if (scroll > avail) { 
        scroll = avail; 
       } 
      } else { 
       scroll = 0; 
      } 

      deltaScroll = $window.scrollTop() - scroll; 

      // if we don't have to scroll because we're already at the right scrolling level, 
      if (!deltaScroll) { 
       return; // do nothing 
      } 

      e.preventDefault(); 

      if (transitionSupported) { 
       $("html").css({ 
        "margin-top": deltaScroll + "px", 
        "transition": scrollTime + "s ease-in-out" 
       }).data("transitioning", scroll); 
      } else { 

       $("html, body").stop(true, true) // stop potential other jQuery animation (assuming we're the only one doing it) 
       .animate({ 
        scrollTop: scroll + "px" 
       }, scrollTime * 1000); 

       return; 
      } 
     } 
    } 
}); 

if (transitionSupported) { 
    $("html").on("transitionend webkitTransitionEnd msTransitionEnd oTransitionEnd", function(e) { 
     var $this = $(this), 
      scroll = $this.data("transitioning"); 

     if (e.target === e.currentTarget && scroll) { 
      $this.removeAttr("style").removeData("transitioning"); 

      $("html, body").scrollTop(scroll); 
     } 
    }); 
} 
}); 
/*----/----Jump Scroll*/ 

/*contact let me know toggle*/ 
jQuery(".letmeknow").click(function() { 
    jQuery(".container").slideToggle(); 
}); 
/*----/-----contact let me know toggle*/ 

}); 

HTML ：

<div class="header"> 
    <div class="navbar"> 

    <a href="#panel1" class="logo" style="display: inline-block;">LogoPlaceHolder</a> 

    <a id="toggle-menu"> 
     <div> 
     <span class="top"></span> 
     <span class="middle"></span> 
     <span class="bottom"></span> 
     </div> 
    </a> 

    <ul class="nav"> 
     <li><a href="" style="display: inline-block; width:100%;">Home</a></li> 
     <li><a href="#panel9" style="display: inline-block; width:100%;">About</a></li> 
     <li><a href="#panel2" style="display: inline-block; width:100%;">Work</a></li> 
     <li><a href="#panel8" style="display: inline-block; width:100%;">Contact</a></li> 
    </ul> 
    </div> 
</div> 

<div class="maincontent"> 
    <div class="panel multiplepanels" id="panel1"> 
    <div class="inner"> 1 </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel2"> 
    <div class="inner"> 
     <p>Work Title 1</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel3"> 
    <div class="inner"> 
     <p>Work Title 2</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel4"> 
    <div class="inner"> 
     <p>Work Title 3</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel5"> 
    <div class="inner"> 
     <p>Work Title 4</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel6"> 
    <div class="inner"> 
     <p>Work Title 5</p> <a href="" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel multiplepanels" id="panel7"> 
    <div class="inner"> 
     <p>Work Title 6</p> <a href="" class="links" style="display: inline-block; width:100%;">View Project →</a> </div> 
    </div> 

    <div class="panel panel-blank multiplepanels" id="panel8"> 
    <div class="inner"> 
     <P>Like what I do?</P> 
     <p><a href="#panel9" class="letmeknow" style="display: inline-block; width:100%;">Let me know</a></p> 

     <div id='container'> 
     <div class='signup'> 
      <p> Send me a message </p> 
      <form> 
      <input type='text' placeholder='First:' /> 
      <input type='text' placeholder='Last:' /> 
      <input type='text' placeholder='Email:' /> 
      <input type='text' placeholder='Phone:' /> 
      <input type='submit' placeholder='SUBMIT' /> 
      </form> 
     </div> 
     </div> 

     <div class="thank you"> 
     <p>Thank you for your message!</p> 
     </div> 

    </div> 
    </div> 

    <div class="panel multiplepanels" id="panel9"> 
    <div class="inner"> 
     <p>Social</p> 
    </div> 
    </div> 

</div> 

<footer> 
    <div class="panel panel-blank" id="panel10"> 
    <div class="inner"> © 2015 thiswebsite.com</div> 
    </div> 
</footer> 

Answer 1

它是由給予.maincontent絕對p ositioning。這使得html不是文檔的全部高度。腳本依賴於這個過渡。因此，這裏有一些變化，使：

Demo

採取的方式點從body（阿里納斯）：

.body { 
    ... 
} 

刪除定位位置：

.maincontent { 
    width: 100%; 
    font-size: 1.05em; 
    font-family: Helvetica Neue, Helvetica, Arial, Sans-serif; 
} 

然後box-sizing在此元素上移除水平滾動條：

.panel { 
    width: 100%; 
    background: #000000; 
    color: #ffffff; 
    height: 40em; 
    padding: 3em; 
    box-sizing: border-box; 
}