jQuery左側固定導航欄點選滑動對應頁面

阿新 • • 發佈：2019-01-16

<!DOCTYPE HTML>
<html>
 <head>
  <title>導航定位</title>
  <meta charset="utf-8">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
 </head>

   <style type="text/css">
      * {
         margin:0px;
         padding:0px;
         font-family:'微軟雅黑';
      }
      div {
         height:400px;
         border:1px solid red;
         width:600px;
      }
      ul {
         overflow:hidden;
         position:fixed;
         top:300px;
         left:650px;
      }
      li {
         width:40px;
         height:40px;
         background:#3F883E;
         text-align:center;
         line-height:40px;
         color:#fff;
         ,font-size:18px;
         cursor:pointer;
         border-bottom:1px solid #fff;
      }
      li.active {
         width: 38px;
         height: 38px;
         margin-bottom: 1px;
         border: 1px solid #3F883E;
         background: #fff;
         color: #666;
      }
   </style>

 <body>

   <div class="div1">段落1</div>

   <div class="div2">段落2</div>

   <div class="div3">段落3</div>

   <div class="div4">段落4</div>

   <div class="div5">段落5</div>

   <div class="div6">段落6</div>

   <div class="div7">段落7</div>

   <ul>
      <li class="li1 active">1</li>
      <li class="li2">2</li>
      <li class="li3">3</li>
      <li class="li4">4</li>
      <li class="li5">5</li>
      <li class="li6">6</li>
      <li class="li7">7</li>
   </ul>
   
   <script type="text/javascript">

   /* 滾動監聽 */
      // 定義一個獲取所有div的距離高度
      var arrOffsetTop = [
         $('.div1').offset().top,
         $('.div2').offset().top,
         $('.div3').offset().top,
         $('.div4').offset().top,
         $('.div5').offset().top,
         $('.div6').offset().top,
         $('.div7').offset().top
      ];

      // 獲取每個div的平均高度
      var fTotalHgt = 0;
      for(var i=0; i<$('div').length; i++) {
         fTotalHgt += $('div').eq(i).outerHeight();
      }
      var fAverageHgt = parseFloat(fTotalHgt / $('div').length);

      // 滾動事件(每次滾動都做一次迴圈判斷)
      $(window).scroll(function() {
         for(var i=0; i<$('div').length; i++) {
            if($(this).scrollTop() > arrOffsetTop[i] - fAverageHgt) {  // 減去一個固定值，是定位準確點
               $('ul li').eq(i).addClass('active').siblings().removeClass('active');
            }
         }
      });

   /* 點選事件 */
      $('ul li').click(function() {
         $(this).addClass('active').siblings().removeClass('active');
         $('body, html').animate({scrollTop: arrOffsetTop[$(this).index()]}, 500);
      });
   </script>

 </body>
</html>

jQuery左側固定導航欄點選滑動對應頁面

<!DOCTYPE HTML> <html> <head> <title>導航定位</title> <meta charset="utf-8"> <meta name="Generat

左側豎條導航欄點擊出現效果的實現

導航欄大部分的網站導航欄都是在網頁的頂端，這類導航欄看起來非常一般，而有些在左側豎著顯示的導航欄就比較好看一些了，但是今天為大家介紹的是左側豎條導航欄實現點擊出現的效果，也就是剛開始只顯示導航，不顯示分類欄，而點擊導航就可以顯示分類欄了，下面一起來看下源代碼的實現吧。<!DOCTYPE html>

CSS+JS製作導航欄點選選中效果

案例一：日曆選中（li）示例如圖：預設選中第一個：週一，如圖：點選週二，如圖： JS程式碼： <script type="text/javascript">

js實現頁面滾動切換導航欄/點選導航欄跳轉到指定位置

最近一直在弄頁面的事情，對頁面方面的知識又鞏固了一下。這次的內容如題，大家對程式碼有疑問或者是有更好的方法歡迎留言！js部分 //標題物件 var title = document.getElementById("title"); //選

renren開源導航欄點選同一選單不重新整理頁面問題

最近一個專案使用了renren-security這個開源框架，先縱覽一下外觀，嗯，確認過眼神，是傳統管理後臺的樣子~ 使用過程中發現，當在導航欄中點選同一選單時，iframe並不會重新整理，其實這也不算個問題，奈何產品經理就要這個功能，只好看看人家原始碼是怎

ios 導航欄點選barbutton的按鈕下拉列表

環境：xocde5.0.2+ios7.0.1 1、導航欄 ----點選科目--------下拉列表程式碼：NGRightTableViewViewController.h #import <UIKit/UIKit.h> @protocol Pulldow

用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容,點選右邊內容的按鈕出現一個新頁面依舊能夠選中左側相應選單,求解決???!!!!

vue-路由用vue+Element-ui寫一個後臺管理介面,點選頭部導航對應顯示下方左側導航選單,點選左側選單對應顯示右邊內容但是點選新建微帖路由出現一個新頁面,左側選單怎麼才能顯示被選中狀態,就是跟上圖狀態一樣??? 這裡是左側選單導航和右邊內容顯示區域程式碼這裡是頁面按鈕

移動端導航條點選一個欄目滑動到螢幕中間

HTML <ul class="tab-head"> <li class="tab-head-item active">衣服</li> <li class="tab-head-ite

根據瀏覽器的滑動條固定導航欄

固定導航欄前言：很多網站都有這種網頁的效果：滑動瀏覽器右側的滾動條，導航欄會一直處於最上方下面我就來簡單實現以下這個功能一.首先我們來寫一下html的結構： 1 <div class="top" id="top"></div>

jQuery點選滑動並修改圖示樣式

//點選滑動改變圖示 $(document).ready(function() { $(".show").click(function() { $(this).next().slideToggle

ios 導航欄點擊barbutton的按鈕下拉列表

pro source war sin nload mutable mst kit with 環境：xocde5.0.2+ios7.0.1 1、導航欄 ----點擊科目--------下拉列表代碼：NGRightTableViewViewControlle

jquery定義之後的按鈕點選事件，會產生累計的情況

使用jquery的on()方法為元素綁定了點選事件，點選同時傳送請求。完成後看效果，第一次點選沒有問題。再一次點選後發現傳送了兩次請求，後面再點擊發現請求的數量越來越多。當排查之後，發現只有一個元素綁定了事件，而且只調用了一次之後，得出最有可能的一種情況，就是點選事件被累加綁定了。 $("#ad

vue頭部導航動態點選處理

1：DATA中兩個變數， data: { nav:['頭條1','頭條2'],

固定定位下拉框點選自動回到頁面問題解決

點選下拉框時頁面自動回到頂部。 <dl id="sample" class="dropdown nav-text-select">

jQuery動態append新增元素點選事件失效

最近開始做前端，遇到一些問題，現在記錄一下，以備不時之需。問題描述：在div中動態新增span元素，之後執行 $(selector).click(function(){var param = $(this).text();}) 無法觸發事件。原因：append中的節點是在整個文件

1.angular html+css+js導航條點選樣式修改，加跳轉頁面

1.html頁面程式碼如下： <div class="main-menu" id="L1" (click)="Tab(1)" style="color:#3bb9e2;"> 主頁 </div> <div class="main-menu

ViewPager+RadioGroup+RadioButton實現滑動切換頁面與點選按鈕切換頁面

一:效果圖: 二:程式碼: 首先根據我們有幾個頁面就設定幾個Fragment, 主函式: public class MainActivity extends AppCompatActivity { private ViewPager viewpager;

固定導航欄案例

<div class="top" id="topPart"> <img src="imgs/top.png" alt=""/></div><div class="nav" id="navBar"> <img src="imgs/nav.png"

JQuery應用例項學習 —— 13 點選後邊框不斷變大

通過操作節點css屬性來控制邊框不斷變大 <!DOCTYPE html> <html lang="en"> <head> <meta charset=

React Native 一個小專案其中一些主要功能實現（頂部導航欄（可滑動）,網路解析，上拉重新整理，下拉載入）

//網路解析 import React, { Component } from "react"; import { View, Text, TouchableOpacity } from "react-native"; import RefreshListView, { Re

jQuery左側固定導航欄點選滑動對應頁面

相關推薦