ช่วยหน่อยครับ javascript scroll ถึง div แล้ว active มันไม่ทำงาน +1 ครับ

เริ่มโดย WP-design, 12 กุมภาพันธ์ 2015, 11:41:01

หัวข้อก่อนหน้า - หัวข้อถัดไป

0 สมาชิก และ 1 ผู้มาเยือน กำลังดูหัวข้อนี้

พิมพ์
ลง หน้า1
การกระทำของผู้ใช้

WP-design

12 กุมภาพันธ์ 2015, 11:41:01
โค้ด เลือก
<!DOCTYPE html>
<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="robots" content="all,index,follow" />

<title>Change Active State of Links in Sticky Navigation on Page Scroll</title>
<meta name="description" content="Change Active State of Links in Sticky Navigation on Page Scroll" />

<style>
html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
header {
position: fixed;
top: 0;
width: 100%;
height: 80px;
background: #fff;
}
nav {
width: 960px;
height: 80px;
margin: 0 auto;
}
nav ul {
margin: 20px 0 0;
}
nav ul li {
display: inline-block;
margin: 0 30px 0 0;
}
.has_sub { position: relative;}

.sub_menu {position:absolute;top: 40px;background-color: #ccc;display: none;}
.has_sub:hover .sub_menu {display: block;}
a { color: #4D4D4D;  font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; }
.active { color: #2dbccb; }

.content { width: 100%; height: 100%; }
.content > section { width: 100%; height: 100%; }

#home { background: #2dbccb; }
#about { background: #f6c362; }
#services { background-color: #eb7e7f; }
#contact { background-color: #415c71; }
  </style>

</head>

<body>

<header>
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="has_sub">
<a href="#about">About</a>
<ul class="sub_menu">
<li><a href="#services">Services1</a></li>
<li><a href="#services">Services2</a></li>
<li><a href="#services">Services3</a></li>
</ul>
</li>
<li class="has_sub">
<a href="#services">Services</a>
<ul class="sub_menu">
<li><a href="#services">Services3</a></li>
<li><a href="#services">Services4</a></li>
<li><a href="#services">Services5</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

<div class="content">
<section id="home">home</section>
<section id="about">about</section>
<section id="services">services</section>
<section id="contact">Contact</section>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

<script>
$(document).ready(function () {
$(document).on("scroll", onScroll);

$('a[href^="#"]').on('click', function (e) {
e.preventDefault();
$(document).off("scroll");

$('a').each(function () {
$(this).removeClass('active');
})
$(this).addClass('active');

var target = this.hash;
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top 2
}, 500, 'swing', function () {
window.location.hash = target;
$(document).on("scroll", onScroll);
});
});
});

function onScroll(event){
var scrollPosition = $(document).scrollTop();
$('nav a').each(function () {
var currentLink = $(this);
var refElement = $(currentLink.attr("href"));
if (refElement.position().top <= scrollPosition && refElement.position().top   refElement.height() > scrollPosition) {
$('nav ul li a').removeClass("active");
currentLink.addClass("active");
}
else{
currentLink.removeClass("active");
}
});
}
</script>
</body>
</html>


เวลา scroll ลงมา แล้วมันไม่ active ตาม div ครับมันต้องแก้ยังไงครับ

Optimus

#2
12 กุมภาพันธ์ 2015, 16:53:14
ดันให้ครับ
รับสอน Android Re-Skin Apps & Games | สอนแบบ 1 ต่อ 1 ผ่าน TeamViewer สนใจ PM สอบถามเลยครับ

รับรีสกิน Apps Android 1 ชุด 15 แอพ 2900 บาท ท่านสามารถนำไปอัพขึ้น Play Store หารายได้ได้เลยครับ สนใจ PM ครับ

ขาย Account Skimlinks ปั่น Amazon ได้ (ตอนนี้คนไทยสมัครไม่ผ่านแล้ว) 4500  บาท PM ครับ

Maxio

#3
12 กุมภาพันธ์ 2015, 17:04:43 แก้ไขล่าสุด: 12 กุมภาพันธ์ 2015, 17:08:18 โดย Maxio
// แก้ไข หรือจริงๆ แค่หาไฟล์ jquery ไม่เจอ ส่วนพวก เครื่องหมาย   แทรกโค๊ดแล้วโดนลบ ทีแรกผมก็นึกว่าก็อปมาผิด  :wanwan004:

ทำไมไม่ลอง debug ดูละครับ อะ ไหนๆก็ว่าง กำลังจะเลิกงาน ลองไปลองทำดูครับ เผื่อมีหลายคนยังไม่รู้วิธีดีบัคเบื้องต้น ถ้าไม่อยากรู้วิธีแก้ก็ก็อปโค๊ดหลังแก้ไปเลยก็ได้ครับ  :wanwan004:


1. เซฟไฟล์ เป็นอะไรก็ได้ เช่น index.html แล้วเปิดบน Chrome เลือก Tool => JavaScript Console หรือกด Ctrl Shift J

จะเห็นว่าที่ console ของเรามีการแจ้งเตือนอยู่ net::ERR_FILE_NOT_FOUND : หาไฟล์ไม่เจอ เพราะอะไร? เพราะมันมองเห็นเป็น file://ajax.... เราต้องใส่ http:// ให้มัน เป็น

โค้ด เลือก

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>


2. ต่อมาเห็น Uncaught SyntaxError: Unexpected number มั้ยครับ คลิกไปดู บรรทัดที่ 103
จะเห็น syntax มันผิดอยู่  
โค้ด เลือก
'scrollTop': $target.offset().top 2 : เลข 2 คืออะไร? ไม่มี operand พวก  -*/ หรอ?
ซึ่งผมไม่รู้วิธีคำนวณนะว่าทำไง ผมเลยลบ 2 ทิ้ง แล้วตัว offset().top เปลี่ยนเป็น offset.top เฉยๆก็ได้ บรรทัดนี้จึงแก้เป็น

โค้ด เลือก
'scrollTop': $target.offset.top

3. ลอง refresh ดู ก็ยังเห็น error อีก คราวนี้เหมือนเดิม แต่คนละบรรทัด เป็นบรรทัด 116
อีกแล้ว

โค้ด เลือก
if (refElement.position().top <= scrollPosition && refElement.position().top   refElement.height() > scrollPosition) {

ตรงระหว่าง refElement.position().top กับ refElement.height() คืออะไรครับ ( -*/ หรือ?) วิธีแก้ก็ใส่   ไปให้ (เดาว่าเป็นตำแหน่งของ hyper link กับความสูง)

จะได้เป็น

if (refElement.position().top <= scrollPosition && refElement.position().top    refElement.height() > scrollPosition) {

เรียบร้อยครับ


โค๊ดหลังจากแก้แล้ว  ลิงค์นี้ https://gist.github.com/anonymous/fa00b45717cdcf04f3fe

โค้ด เลือก

<!DOCTYPE html>
<html lang="en-US">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="robots" content="all,index,follow" />

 <title>Change Active State of Links in Sticky Navigation on Page Scroll</title>
 <meta name="description" content="Change Active State of Links in Sticky Navigation on Page Scroll" />

 <style>
   html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
   header {
     position: fixed;
     top: 0;
     width: 100%;
     height: 80px;
     background: #fff;
   }
   nav {
     width: 960px;
     height: 80px;
     margin: 0 auto;
   }
   nav ul {
     margin: 20px 0 0;
   }
   nav ul li {
     display: inline-block;
     margin: 0 30px 0 0;
   }
   .has_sub { position: relative;}
   
   .sub_menu {position:absolute;top: 40px;background-color: #ccc;display: none;}
   .has_sub:hover .sub_menu {display: block;}
   a { color: #4D4D4D;  font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; }
   .active { color: #2dbccb; }
   
   .content { width: 100%; height: 100%; }
   .content > section { width: 100%; height: 100%; }
   
   #home { background: #2dbccb; }
   #about { background: #f6c362; }
   #services { background-color: #eb7e7f; }
   #contact { background-color: #415c71; }
   </style>

</head>

<body>

 <header>
   <nav>
     <ul>
       <li><a class="active" href="#home">Home</a></li>
       <li class="has_sub">
       <a href="#about">About</a>
       <ul class="sub_menu">
       <li><a href="#services">Services1</a></li>
       <li><a href="#services">Services2</a></li>
       <li><a href="#services">Services3</a></li>
       </ul>
       </li>
       <li class="has_sub">
       <a href="#services">Services</a>        
       <ul class="sub_menu">
       <li><a href="#services">Services3</a></li>
       <li><a href="#services">Services4</a></li>
       <li><a href="#services">Services5</a></li>
       </ul>
       </li>
       <li><a href="#contact">Contact</a></li>
     </ul>
   </nav>
 </header>

 <div class="content">
   <section id="home">home</section>
   <section id="about">about</section>
   <section id="services">services</section>
   <section id="contact">Contact</section>
 </div>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

 <script>
    $(document).ready(function () {
       $(document).on("scroll", onScroll);

       $('a[href^="#"]').on('click', function (e) {
         e.preventDefault();
         $(document).off("scroll");

         $('a').each(function () {
           $(this).removeClass('active');
         })
         $(this).addClass('active');

         var target = this.hash;
         $target = $(target);
         $('html, body').stop().animate({
           'scrollTop': $target.offset.top
         }, 500, 'swing', function () {
           window.location.hash = target;
           $(document).on("scroll", onScroll);
         });
       });
     });

     function onScroll(event){
       var scrollPosition = $(document).scrollTop();
       $('nav a').each(function () {
         var currentLink = $(this);
         var refElement = $(currentLink.attr("href"));
         if (refElement.position().top <= scrollPosition && refElement.position().top   refElement.height() > scrollPosition) {
           $('nav ul li a').removeClass("active");
           currentLink.addClass("active");
         }
         else{
           currentLink.removeClass("active");
         }
       });
     }
 </script>
</body>
</html>

WP-design

#4
12 กุมภาพันธ์ 2015, 17:42:47 แก้ไขล่าสุด: 12 กุมภาพันธ์ 2015, 19:47:00 โดย WP-design
อ้างถึงจาก: Maxio ใน 12 กุมภาพันธ์ 2015, 17:04:43
// แก้ไข หรือจริงๆ แค่หาไฟล์ jquery ไม่เจอ ส่วนพวก เครื่องหมาย   แทรกโค๊ดแล้วโดนลบ ทีแรกผมก็นึกว่าก็อปมาผิด  :wanwan004:

ทำไมไม่ลอง debug ดูละครับ อะ ไหนๆก็ว่าง กำลังจะเลิกงาน ลองไปลองทำดูครับ เผื่อมีหลายคนยังไม่รู้วิธีดีบัคเบื้องต้น ถ้าไม่อยากรู้วิธีแก้ก็ก็อปโค๊ดหลังแก้ไปเลยก็ได้ครับ  :wanwan004:


1. เซฟไฟล์ เป็นอะไรก็ได้ เช่น index.html แล้วเปิดบน Chrome เลือก Tool => JavaScript Console หรือกด Ctrl Shift J

จะเห็นว่าที่ console ของเรามีการแจ้งเตือนอยู่ net::ERR_FILE_NOT_FOUND : หาไฟล์ไม่เจอ เพราะอะไร? เพราะมันมองเห็นเป็น file://ajax.... เราต้องใส่ http:// ให้มัน เป็น

โค้ด เลือก

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>


2. ต่อมาเห็น Uncaught SyntaxError: Unexpected number มั้ยครับ คลิกไปดู บรรทัดที่ 103
จะเห็น syntax มันผิดอยู่  
โค้ด เลือก
'scrollTop': $target.offset().top 2 : เลข 2 คืออะไร? ไม่มี operand พวก  -*/ หรอ?
ซึ่งผมไม่รู้วิธีคำนวณนะว่าทำไง ผมเลยลบ 2 ทิ้ง แล้วตัว offset().top เปลี่ยนเป็น offset.top เฉยๆก็ได้ บรรทัดนี้จึงแก้เป็น

โค้ด เลือก
'scrollTop': $target.offset.top

3. ลอง refresh ดู ก็ยังเห็น error อีก คราวนี้เหมือนเดิม แต่คนละบรรทัด เป็นบรรทัด 116
อีกแล้ว

โค้ด เลือก
if (refElement.position().top <= scrollPosition && refElement.position().top   refElement.height() > scrollPosition) {

ตรงระหว่าง refElement.position().top กับ refElement.height() คืออะไรครับ ( -*/ หรือ?) วิธีแก้ก็ใส่   ไปให้ (เดาว่าเป็นตำแหน่งของ hyper link กับความสูง)

จะได้เป็น

if (refElement.position().top <= scrollPosition && refElement.position().top    refElement.height() > scrollPosition) {

เรียบร้อยครับ


โค๊ดหลังจากแก้แล้ว  ลิงค์นี้ https://gist.github.com/anonymous/fa00b45717cdcf04f3fe

โค้ด เลือก

<!DOCTYPE html>
<html lang="en-US">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta name="robots" content="all,index,follow" />

 <title>Change Active State of Links in Sticky Navigation on Page Scroll</title>
 <meta name="description" content="Change Active State of Links in Sticky Navigation on Page Scroll" />

 <style>
   html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
   header {
     position: fixed;
     top: 0;
     width: 100%;
     height: 80px;
     background: #fff;
   }
   nav {
     width: 960px;
     height: 80px;
     margin: 0 auto;
   }
   nav ul {
     margin: 20px 0 0;
   }
   nav ul li {
     display: inline-block;
     margin: 0 30px 0 0;
   }
   .has_sub { position: relative;}
   
   .sub_menu {position:absolute;top: 40px;background-color: #ccc;display: none;}
   .has_sub:hover .sub_menu {display: block;}
   a { color: #4D4D4D;  font-family: sans-serif; text-transform: uppercase; text-decoration: none; line-height: 42px; }
   .active { color: #2dbccb; }
   
   .content { width: 100%; height: 100%; }
   .content > section { width: 100%; height: 100%; }
   
   #home { background: #2dbccb; }
   #about { background: #f6c362; }
   #services { background-color: #eb7e7f; }
   #contact { background-color: #415c71; }
   </style>

</head>

<body>

 <header>
   <nav>
     <ul>
       <li><a class="active" href="#home">Home</a></li>
       <li class="has_sub">
       <a href="#about">About</a>
       <ul class="sub_menu">
       <li><a href="#services">Services1</a></li>
       <li><a href="#services">Services2</a></li>
       <li><a href="#services">Services3</a></li>
       </ul>
       </li>
       <li class="has_sub">
       <a href="#services">Services</a>        
       <ul class="sub_menu">
       <li><a href="#services">Services3</a></li>
       <li><a href="#services">Services4</a></li>
       <li><a href="#services">Services5</a></li>
       </ul>
       </li>
       <li><a href="#contact">Contact</a></li>
     </ul>
   </nav>
 </header>

 <div class="content">
   <section id="home">home</section>
   <section id="about">about</section>
   <section id="services">services</section>
   <section id="contact">Contact</section>
 </div>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

 <script>
    $(document).ready(function () {
       $(document).on("scroll", onScroll);

       $('a[href^="#"]').on('click', function (e) {
         e.preventDefault();
         $(document).off("scroll");

         $('a').each(function () {
           $(this).removeClass('active');
         })
         $(this).addClass('active');

         var target = this.hash;
         $target = $(target);
         $('html, body').stop().animate({
           'scrollTop': $target.offset.top
         }, 500, 'swing', function () {
           window.location.hash = target;
           $(document).on("scroll", onScroll);
         });
       });
     });

     function onScroll(event){
       var scrollPosition = $(document).scrollTop();
       $('nav a').each(function () {
         var currentLink = $(this);
         var refElement = $(currentLink.attr("href"));
         if (refElement.position().top <= scrollPosition && refElement.position().top   refElement.height() > scrollPosition) {
           $('nav ul li a').removeClass("active");
           currentLink.addClass("active");
         }
         else{
           currentLink.removeClass("active");
         }
       });
     }
 </script>
</body>
</html>




สุดยอดเลยครับ แล้วถ้าใส่ link ในซับเมนูเหมือนด้านล่าง ละครับต้องแก้ไงผมลองแล้วมันไม่ active ถ้ามี link ด้วย

<header>
   <nav>
     <ul>
       <li><a class="active" href="#home">Home</a></li>
       <li class="has_sub">
       <a href="#about">About</a>
       <ul class="sub_menu">
       <li><a href="http://www.thaiseoboard.com/">Services1</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services2</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services3</a></li>
       </ul>
       </li>
       <li class="has_sub">
       <a href="#services">Services</a>        
       <ul class="sub_menu">
       <li><a href="http://www.thaiseoboard.com/">Services3</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services4</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services5</a></li>
       </ul>
       </li>
       <li><a href="#contact">Contact</a></li>
     </ul>
   </nav>
 </header>

WP-design

#5
12 กุมภาพันธ์ 2015, 19:47:59


สุดยอดเลยครับ แล้วถ้าใส่ link ในซับเมนูเหมือนด้านล่าง ละครับต้องแก้ไงผมลองแล้วมันไม่ active ถ้ามี link ด้วย

<header>
   <nav>
     <ul>
       <li><a class="active" href="#home">Home</a></li>
       <li class="has_sub">
       <a href="#about">About</a>
       <ul class="sub_menu">
       <li><a href="http://www.thaiseoboard.com/">Services1</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services2</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services3</a></li>
       </ul>
       </li>
       <li class="has_sub">
       <a href="#services">Services</a>        
       <ul class="sub_menu">
       <li><a href="http://www.thaiseoboard.com/">Services3</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services4</a></li>
       <li><a href="http://www.thaiseoboard.com/">Services5</a></li>
       </ul>
       </li>
       <li><a href="#contact">Contact</a></li>
     </ul>
   </nav>
 </header>


แนะนำหน่อยครับวิธีอื่นก็ได้

Maxio

#6
12 กุมภาพันธ์ 2015, 21:02:27
ในฟังค์ชัน onScroll(event) เอาบรรทัดนี้ออกซิครับ  :wanwan004:

โค้ด เลือก

$('nav ul li a').removeClass("active");  //<== ลบทิ้ง
พิมพ์
ขึ้น หน้า1
การกระทำของผู้ใช้