Question

我已经建立了一个有趣的东西，但现在很少被卡住。我的问题是<hr>下划线也应该遵循该部分，这意味着如果访问者滚动到例如部分技能，<hr>应该强调列表项＆＃34;技能＆＃34;。现在，如果我向下滚动页面，<hr>仍然坚持第一个列表项。

＆＃13;

$("ul").find("li").click(function(e) {  
	e.preventDefault(); //prevent from triggering this event
	var scrollTo = $(this).attr("href"); 
	$(this).removeClass("current");
	$(this).parent("li").addClass("current");
	$("html, body").animate({
		scrollTop: $(scrollTo).offset().top
	}, 5000, "linear");
});

＆＃13;

#nav-block {
	width: 750px;
	float: right;
	margin-top: 22px;
  position: fixed;
  left: 0;
  top: 0;
}

#navbar-unordered-list li {
	display: inline;
	text-align: center;
}

.navbar-list-items {
	display: inline-block;
	width: 120px;
	padding: .75rem 0;
	margin: 0;
	color: red;
}

.navbar-list-items:hover {
	text-decoration: none;
}

.one.current ~ hr,
#navbar-unordered-list li.one:hover ~ hr {
	margin-left: 0;
}

.two.current ~ hr,
#navbar-unordered-list li.two:hover ~ hr {
	margin-left: 120px;
}

.three.current ~ hr,
#navbar-unordered-list li.three:hover ~ hr {
	margin-left: 240px;
}

.four.current ~ hr,
#navbar-unordered-list li.four:hover ~ hr {
	margin-left: 360px;
}

.five.current ~ hr,
#navbar-unordered-list li.five:hover ~ hr {
	margin-left: 480px;
}

hr {
	padding: 2px;
	width: 120px;
	margin: 0;
	height: 2px;
	background: tomato;
	border: none;
	transition: .8s ease-in-out;
}

.sections {
	display: inline-block;
	float: left;
	min-height: 20px;
	padding: 40px;
	width: 100%;
}

#sectionOne, 
#sectionThree, 
#sectionFive {
	background-color: #2196F3;
	color: white;
}

#sectionTwo, 
#sectionFour,
#sectionSix {
	background-color: #e7e9ec;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="nav-block">
    <ul id="navbar-unordered-list">
      <li class="one"><a href="#sectionOne" class="navbar-list-items">Profile</a></li>
      <li class="two"><a href="#sectionTwo" class="navbar-list-items">Personal Project</a></li>
      <li class="three"><a href="#sectionThree" class="navbar-list-items">Skills</a></li>
      <li class="four"><a href="#sectionFour" class="navbar-list-items">CSS drawings</a></li>
      <li class="five"><a href="#sectionFive" class="navbar-list-items">Contact</a></li>
      <hr>
    </ul>
  </div>
  
    <section class="sections" id="sectionOne">
      <p>Profile</p>
     </section>
  
      <section class="sections" id="sectionTwo">
      <p>Personal Project</p>
     </section>
  
      <section class="sections" id="sectionThree">
      <p>Skills</p>
     </section>
  
      <section class="sections" id="sectionFour">
      <p>CSS drawings</p>
     </section>
  
      <section class="sections" id="sectionFive">
      <p>Contact</p>
     </section>
  </body>

＆＃13;

Answer 1

我认为这就是你要找的东西。

(function(){
    $("ul").find("li").click(function(e) {  
        e.preventDefault(); //prevent from triggering this event
        var scrollTo = $(this).find('a').attr("href"); 
        $(this).siblings().removeClass("current");
        $(this).addClass("current");
        $("html, body").animate({
            scrollTop: $(scrollTo).offset().top
        }, 2000, "linear");
    });
})();

工作示例JsFiddle

Answer 2

我只修改了javascript / jquery部分，修改很少。这是一个解决方案，其中<hr>元素跟随窗口偏移顶部属性。您会注意到它没有与部分对齐。

 var initialHrTop;
$(document).ready(function(){


    $("ul").find("li").click(function(e) {  
    e.preventDefault(); //prevent from triggering this event
    var scrollTo = $(this).find('a').attr("href");  // fixed this, added .find('a')
    window.location.hash = scrollTo; // to change hash in browser url input  
    $(this).removeClass("current");
    $(this).parent("li").addClass("current");
    $("html, body").animate({
        scrollTop: $(scrollTo).offset().top
    }, 1000, "linear"); //shorten time for image  
});
$('hr').css('position','absolute');
initialHrTop = parseInt($('hr').offset().top);
 $(window).scroll(function (event) {
    var scroll = parseInt($(window).scrollTop());
    // Do something
    var hrTop = parseInt($('.section-line').offset().top);


        $('hr').css('left' ,'0px');
        $('hr').css('top' , scroll + initialHrTop + 'px');

    if(scroll == 0){
        $('hr').css('left' ,'');
    }
}); 


});

完成第二个解决方案，因此hr元素跟随每个部分的偏移位置：

var initialHrTop;
$(document).ready(function(){


    $("ul").find("li").click(function(e) {  
    e.preventDefault(); //prevent from triggering this event
    var scrollTo = $(this).find('a').attr("href");  // fixed this, added .find('a')
    window.location.hash = scrollTo; // to change hash in browser url input  
    $(this).removeClass("current");
    $(this).parent("li").addClass("current");
    $("html, body").animate({
        scrollTop: $(scrollTo).offset().top
    }, 1000, "linear"); //shorten time for image  
});
$('hr').css('position','absolute');
initialHrTop = parseInt($('hr').offset().top);


$(window).scroll(function (event) {
    //var scroll = parseInt($(window).scrollTop());

    var hrTop = parseInt($('.section-line').offset().top);
    var currentSection = window.location.hash;
    if(currentSection != ''){
    var currentSectionPosition =$(currentSection).offset().top;
    var currentSectionHeight = $(currentSection).height();
    $('hr').css('left' ,'0px');
    $('hr').css('top' , currentSectionPosition + initialHrTop + 'px');
    }



    if(scroll == 0){
        $('hr').css('left' ,'');
    }
});
});

这只是一个解决方案，你应该去哪个方向，剩下的东西取决于你的主要目标:)。

另外，您会注意到我在菜单项单击事件中添加了window.location.hash更改，这对于第二个解决方案至关重要，让我们知道hr元素应该引用哪个部分。

hr list item下划线与滚动时视图中显示的部分对齐

2 个答案: