0
내가 스크롤의 다른 목록 항목을 강조하기 위해 노력하고있어하지만이 워드 프레스 설치에 포팅하는 것이 내가 지금 동작하지 않습니다 활성 .. 스크롤
여기에 내 현재 메뉴의
:<div id="navigation">
<ul>
<li class="nav1">
<a href="#post-31"></a>
</li>
<li class="nav2">
<a href="#post-28"></a>
</li>
<li class="nav3">
<a href="#post-17"></a>
</li>
<li class="nav4">
<a href="#post-12"></a>
</li>
<li class="nav5">
<a href="#post-5"></a>
</li>
<li class="nav6">
<a href="#post-1"></a>
</li>
</ul>
</div>
그리고 여기에 자바 스크립트입니다 : 내가 스크립트를 말할 수
//#### Change Active Menu Item
// Cache selectors
var lastId,
topMenu = $("#navigation ul"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
//$('html, body').stop().animate({ scrollTop: offsetTop }, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href=#"+id+"]").parent().addClass("active");
}
});
종류의는 # 포스트 (1) 목록 항목에 활성 클래스를두고 스크롤 할 때부터 노력하고 있습니다,하지만에서 이동하지 않습니다 그곳에.
코드에 잘못된 내용이 표시 될 수 있습니까?
혹시 jsfiddle로 이것을 할 수있어서 주위에서 놀 수 있습니다. – Alex
@Alex 아마, 내가 가지고있는 문제는 정적 사이트에서 잘 작동한다는 것입니다. 하지만 문제가 시작된 WordPress 테마에 추가했을 때 .. 사용자 정의 JS 파일에서 "$"를 모두 "jQuery"로 변환했지만 여전히 제대로 작동하지 않습니다. 자바 스크립트가 충돌하는지 확인하는 방법이 있습니다. WordPress에 뭐든지? –
@JoeBobby, 좋은 방법은 실제로 jsfiddle에 게시 할 수 있습니다. REAL htm 출력으로 시작한 다음 js를 추가하십시오. 작동하면 문제가 충돌 할 수 있습니다. 그렇지 않은 경우 문제는 js에 있으며 WP의 나머지 부분과 관련이 없습니다. 정적 HTML 코드가 WP의 출력과 100 % 동일 했습니까? – Gavriel