스크립트 충돌 납니다 ㅠㅠ
본문
제가 스크롤 바가 내려가면 특정 위치에서 상단메뉴가 따라 가는 걸 적용하고 싶은데요 적용 했거든요 근데 처음에는 적용이 되다가
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
이 인쿨드 넣으면 스크립트가 안되는 현상이 일어납니다. 인쿨드를 빼면 또 되고 제가 초보라서 ㅠㅠ 4시간 째
기능 원본 파일은 밑에 보시면 아래 소스입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
///// 스크롤 100픽셀 내리면 상단메뉴 박스생김 /////
var currentScrollTop = 0;
window.onload = function() {
scrollController();
$(window).on("scroll", function() {
scrollController();
});
}
function scrollController() {
currentScrollTop = $(window).scrollTop();
if (currentScrollTop > 100) {
$("#topNav").addClass("fixed");
}else {
$("#topNav").removeClass("fixed");
}
}
///// 상단 하위메뉴 생김 /////
$(document).ready(function(){
$("#topNav>ul>li").click(function(){
$("#topNav").find("div").fadeOut();
$(this).find("div").fadeIn();
});
});
</script>
<style>
* {margin:0; padding:0; }
/**** 상단 *****/
header {position:fixed; z-index:1; top:0; }
header>#topNav { position:fixed; padding-top:20px; width:100%; height:40px; transition:.5s ease-in-out; }
header #topNav.fixed { position:fixed; box-shadow: 1px 1px 5px rgba(0,0,0,0.6); padding-top:5px; background:gold;}
header a{ text-decoration:none; color:black; }
header>#topNav>ul {display:flex; list-style:none;}
header #topNav>ul>li {flex-grow:1; text-align:center; }
/**** 상단: 하위메뉴 *****/
header>#topNav>ul>li>div {position:absolute; margin:10px 0 0 50px; z-index:1; width:100px; background:#eee; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); text-align:left; display:none; }
header>#topNav>ul>li>div>ul {list-style:none; padding:10px; }
header>#topNav>ul>li>div>ul>li {padding:2px 10px; text-align:left; }
</style>
</head>
<body>
<header>
<nav id="topNav">
<ul>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<div style="margin-top:100px;padding:600px;"></div>
</body>
</html>
답변 1
G5_THEME_PATH.'/head.sub.php'
여기서 부터 head태그가 시작될텐데 그걸 안에 넣으셨네요
스크립트를 body영역에 넣으시고 head.sub.php 는 밖으로 빼세요, head태그는 지우시구요 이미 head.sub.php에 있으니
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<?php include_once(G5_THEME_PATH.'/head.sub.php');?>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<title>스크롤시 상단메뉴 박스생김</title>
<meta charset="utf-8">
<style>
* {margin:0; padding:0; }
/**** 상단 *****/
header {position:fixed; z-index:1; top:0; }
header>#topNav { position:fixed; padding-top:20px; width:100%; height:40px; transition:.5s ease-in-out; }
header #topNav.fixed { position:fixed; box-shadow: 1px 1px 5px rgba(0,0,0,0.6); padding-top:5px; background:gold;}
header a{ text-decoration:none; color:black; }
header>#topNav>ul {display:flex; list-style:none;}
header #topNav>ul>li {flex-grow:1; text-align:center; }
/**** 상단: 하위메뉴 *****/
header>#topNav>ul>li>div {position:absolute; margin:10px 0 0 50px; z-index:1; width:100px; background:#eee; box-shadow: 1px 1px 5px rgba(0,0,0,0.3); text-align:left; display:none; }
header>#topNav>ul>li>div>ul {list-style:none; padding:10px; }
header>#topNav>ul>li>div>ul>li {padding:2px 10px; text-align:left; }
</style>
<body>
<script>
///// 스크롤 100픽셀 내리면 상단메뉴 박스생김 /////
var currentScrollTop = 0;
window.onload = function() {
scrollController();
$(window).on("scroll", function() {
scrollController();
});
}
function scrollController() {
currentScrollTop = $(window).scrollTop();
if (currentScrollTop > 100) {
$("#topNav").addClass("fixed");
}else {
$("#topNav").removeClass("fixed");
}
}
///// 상단 하위메뉴 생김 /////
$(document).ready(function(){
$("#topNav>ul>li").click(function(){
$("#topNav").find("div").fadeOut();
$(this).find("div").fadeIn();
});
});
</script>
<header>
<nav id="topNav">
<ul>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
<li>
<a href="#">menu</a>
<div>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
</li>
</ul>
</nav>
</header>
<div style="margin-top:100px;padding:600px;"></div>
</body>
</html>
혹시 이렇게 하라는 말씀인가요? 제가 해놓게 맞는지 모르겠지만 되지않네요 ㅠㅠ
