0
私は1ページのウェブサイトを作っています。私は自分のウェブページの右側のセクションをスクロールするためにSmint（jquery plugin）を使います。だから私はnavbarを作って、navbarのサイトでsection1をクリックしたときに、一番上ではなく上にスクロールします。ページをスクロールするとトップに留まるので、Navbarの位置は固定されています。おそらく問題はsection1がnavbarの下にあるからです。セクション2をクリックするとセクション2にジャンプしますが、ナビゲーションバーのセクション2はアクティブではありませんか？どのように私はこの問題を解決することができるので、どのようなアイデア。私は1ページのウェブサイトのスクロールでトップをスクロールする方法はありますか？
//jquery.smint.js
/*
SMINT V1.0 by Robert McCracken
SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy)
SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy (@mcpacosy)
SMINT is my first dabble into jQuery plugins!
http://www.outyear.co.uk/smint/
If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself
*/
(function(){
\t $.fn.smint = function(options) {
\t \t var settings = $.extend({
\t \t \t 'scrollSpeed' : 500,
\t \t \t 'mySelector' : 'div'
\t \t }, options);
\t \t // adding a class to users div
\t \t $(this).addClass('smint');
\t \t \t \t
\t \t
\t \t //Set the variables needed
\t \t var optionLocs = new Array(),
\t \t \t lastScrollTop = 0,
\t \t \t menuHeight = $(".smint").height(),
\t \t \t smint = $('.smint'),
\t smintA = $('.smint a'),
\t myOffset = smint.height();
\t \t if (settings.scrollSpeed) {
\t \t \t \t var scrollSpeed = settings.scrollSpeed
\t \t \t }
\t \t if (settings.mySelector) {
\t \t \t \t var mySelector = settings.mySelector
\t \t };
\t \t return smintA.each(function(index) {
\t \t \t var id = $(this).attr('href').split('#')[1];
\t \t \t if (!$(this).hasClass("extLink")) {
\t \t \t \t $(this).attr('id', id);
\t \t \t }
\t \t \t
\t \t \t //Fill the menu
\t \t \t optionLocs.push(Array(
\t \t \t \t $(mySelector+"."+id).position().top-menuHeight,
\t \t \t \t $(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id)
\t \t \t);
\t \t \t ///////////////////////////////////
\t \t \t // get initial top offset for the menu
\t \t \t var stickyTop = smint.offset().top; \t
\t \t \t // check position and make sticky if needed
\t \t \t var stickyMenu = function(direction){
\t \t \t \t // current distance top
\t \t \t \t var scrollTop = $(window).scrollTop()+myOffset;
\t \t \t \t // if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
\t \t \t \t if (scrollTop > stickyTop+myOffset) {
\t \t \t \t \t smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addClass('fxd');
\t \t \t \t \t // add padding to the body to make up for the loss in heigt when the menu goes to a fixed position.
\t \t \t \t \t // When an item is fixed, its removed from the flow so its height doesnt impact the other items on the page
\t \t \t \t \t $('body').css('padding-top', menuHeight); \t
\t \t \t \t } else {
\t \t \t \t \t smint.css('position', 'relative').removeClass('fxd');
\t \t \t \t \t //remove the padding we added.
\t \t \t \t \t $('body').css('padding-top', '0'); \t
\t \t \t \t }
\t \t \t \t // Check if the position is inside then change the menu
\t \t \t \t // Courtesy of Ryan Clarke (@clarkieryan)
\t \t \t \t if(optionLocs[index][0] <= scrollTop && scrollTop <= optionLocs[index][1]){ \t
\t \t \t \t \t if(direction == "up"){
\t \t \t \t \t \t $("#"+id).addClass("active");
\t \t \t \t \t \t $("#"+optionLocs[index+1][2]).removeClass("active");
\t \t \t \t \t } else if(index > 0) {
\t \t \t \t \t \t $("#"+id).addClass("active");
\t \t \t \t \t \t $("#"+optionLocs[index-1][2]).removeClass("active");
\t \t \t \t \t } else if(direction == undefined){
\t \t \t \t \t \t $("#"+id).addClass("active");
\t \t \t \t \t }
\t \t \t \t \t $.each(optionLocs, function(i){
\t \t \t \t \t \t if(id != optionLocs[i][2]){
\t \t \t \t \t \t \t
\t \t \t \t \t \t \t $("#"+optionLocs[i][2]).removeClass("active");
\t \t \t \t \t \t }
\t \t \t \t \t });
\t \t \t \t }
\t \t \t };
\t \t \t // run functions
\t \t \t stickyMenu();
\t \t \t // run function every time you scroll
\t \t \t $(window).scroll(function() {
\t \t \t \t //Get the direction of scroll
\t \t \t \t var st = $(this).scrollTop()+myOffset;
\t \t \t \t if (st > lastScrollTop) {
\t \t \t \t direction = "down";
\t \t \t \t } else if (st < lastScrollTop){
\t \t \t \t direction = "up";
\t \t \t \t }
\t \t \t \t lastScrollTop = st;
\t \t \t \t stickyMenu(direction);
\t \t \t \t // Check if at bottom of page, if so, add class to last <a> as sometimes the last div
\t \t \t \t // isnt long enough to scroll to the top of the page and trigger the active state.
\t \t \t \t if($(window).scrollTop() + $(window).height() == $(document).height()) {
\t \t \t \t smintA.removeClass('active')
\t \t \t \t $(".smint a:not('.extLink'):last").addClass('active')
\t \t \t \t
\t \t \t \t } else {
\t \t \t \t \t smintA.last().removeClass('active')
\t \t \t \t }
\t \t \t });
\t \t \t ///////////////////////////////////////
\t $(this).on('click', function(e){
\t \t \t \t // gets the height of the users div. This is used for off-setting the scroll so the menu doesnt overlap any content in the div they jst scrolled to
\t \t \t \t var myOffset = smint.height();
\t \t // stops hrefs making the page jump when clicked
\t \t \t \t e.preventDefault();
\t \t \t \t
\t \t \t \t // get the hash of the button you just clicked
\t \t \t \t var hash = $(this).attr('href').split('#')[1];
\t \t \t \t
\t \t \t \t var goTo = $(mySelector+'.'+ hash).offset().top-myOffset;
\t \t \t \t
\t \t \t \t // Scroll the page to the desired position!
\t \t \t \t $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
\t \t \t \t
\t \t \t \t // if the link has the '.extLink' class it will be ignored
\t \t \t \t // Courtesy of mcpacosy (@mcpacosy)
\t \t \t \t if ($(this).hasClass("extLink"))
{
return false;
}
\t \t \t }); \t
\t \t \t //This lets yo use links in body text to scroll. Just add the class 'intLink' to your button and it will scroll
\t \t \t $('.intLink').on('click', function(e){
\t \t \t \t var myOffset = smint.height();
\t \t \t \t e.preventDefault();
\t \t \t \t
\t \t \t \t var hash = $(this).attr('href').split('#')[1];
\t \t \t \t if (smint.hasClass('fxd')) {
\t \t \t \t \t var goTo = $(mySelector+'.'+ hash).position().top-myOffset;
\t \t \t \t } else {
\t \t \t \t \t var goTo = $(mySelector+'.'+ hash).position().top-myOffset*2;
\t \t \t \t }
\t \t \t \t
\t \t \t \t $("html, body").stop().animate({ scrollTop: goTo }, scrollSpeed);
\t \t \t \t if ($(this).hasClass("extLink"))
{
return false;
}
\t \t \t }); \t
\t \t });
\t };
\t $.fn.smint.defaults = { 'scrollSpeed': 500, 'mySelector': 'div'};
})(jQuery);
//call smint
$(document).ready(function(){
\t
\t \t \t \t \t $('.menubar').smint();
\t
\t
\t \t \t \t });
\t \t \t \thtml{
\t background: #84b6f4;
\t
}
.box{
\t position: absolute;
\t top: 0;
\t left: 0;
\t height: 46px;
\t width: 100%;
\t margin: 0;
\t padding: 0; \t
\t background-color: black;
\t
\t
}
.nav{
\t position: fixed;
\t top: 0;
\t left: 0;
\t height: 46px;
\t width: 100%;
\t font-family: arial;
\t list-style-type: none;
\t overflow: hidden;
\t margin: 0;
\t padding: 0; \t
\t background-color: #18ac11;
}
.nav li{
\t
\t float: left;
\t
\t
}
.nav li a{
\t display: block;
\t color: black;
\t text-align: center;
\t padding: 14px 16px;
\t text-decoration: none;
}
.nav li a:hover{
\t background-color: #11740b;
\t
}
/*smint active section*/
.active {
\t background: #25aae1;
}
.section1{
\t background: red;
\t
}
.section2{
\t background: blue;
\t
}
.section3{
\t background: yellow;
\t
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
\t \t \t \t
\t \t \t \t
\t <body>
\t \t <div class="menubar">
\t \t \t <ul class="nav">
\t \t \t \t <li><a href="#section1">Selection1</a></li>
\t \t \t \t <li><a href="#section2">Selection2</a></li>
\t \t \t \t <li><a href="#section3">Selection3</a></li>
\t \t \t </ul>
\t \t </div>
\t \t
\t
\t
\t \t
\t \t <div class="section1">
\t \t \t <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>Section1</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
\t \t </div>
\t \t
\t \t <div class="section2">
\t \t \t <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><h1>Section2</h1><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
\t \t </div>
\t \t
\t \t <div class="section3">
\t \t \t <br><br><br><br><br><br><br><br><br><br><br><br><h1>Section3</h1><br><br><br><br><br><br><br><br><br><br><br><br>
\t \t </div>
\t \t
\t \t
\t </body>