웹 페이지 포지셔닝 내비게이션 사례 (js 방법)
// getByClassName , class name
function hasClass( obj, cls ){
return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
}
function removeClass( obj, cls ){
if( hasClass( obj, cls )){
//remove
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
obj.className = obj.className.replace(reg, "");
}
}
function addClass(obj , cls ){
if( !hasClass( obj, cls )){
//remove
obj.className += " "+ cls;
}
}
// getByClassName , class
function getByClassName(obj , cls){
var elements = obj.getElementsByTagName("*");
var result = [];
for (var i = 0; i< elements.length; i++) {
if (elements[i].className == cls){
result.push(elements[i])
}
}
return result
}
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != 'BackCompat')
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
window.onload = function(){
window.onscroll = function(){
//
// var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
var top=getScrollTop()
// console.log(top)
var menus = document.getElementById("menu").getElementsByTagName("a");
// var items = document.getElementById("content").getElementByClassName("item")
var items = getByClassName(document.getElementById("content"), "item");
var currentId = "";
for ( var i=0; i< items.length; i++ ){
var _item = items[i];
var _itemTop = _item.offsetTop;
console.log(_itemTop)
if( top > _itemTop - 200 ){
// jq #,
currentId = _item.id;
} else {
break;
}
}
// , menu a class current
if(currentId){
for( var j = 0 ; j < menus.length ; j++){
var _menu = menus[j];
var _href = _menu.href.split("#");
// , id ,
if (_href[_href.length - 1] != currentId) {
removeClass(_menu,"current");
}else{
addClass(_menu,"current");
}
}
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.