jQuery左側固定導航欄點選滑動對應頁面
<!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