jQuery右側懸浮樓層滾動電梯菜單

阿新 • • 發佈：2018-01-25

ase pan navi epc dex bottom -s event meta

http://www.kaiu.net/effectCon.aspx?id=2198

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery右側懸浮樓層滾動代碼 - 開優網絡</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <style>
        html {
            box 
-sizing: border-box;
        }

        *,
        *:after,
        *:before {
            box-sizing: inherit;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: "Roboto", Helvetica, Arial, sans-serif;
            margin:  
0;
        }

        h1 {
            margin: 0;
            padding: 0;
        }

        section {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify 
-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            color: rgba(0,0,0,0.5);
            font-size: 2rem;
            min-height: 100%;
            height: 100vh;
        }

        .Quick-navigation {
            position: fixed;
            z-index: 1;
            margin: 0;
            top: 50%;
            right: 0;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .Quick-navigation-item {
            color: rgba(0,0,0,0.4);
            text-decoration: none;
            font-size: 1.3em;
            -webkit-transition: color 0.3s;
            transition: color 0.3s;
            padding: 0.5em;
            display: block;
        }

            .Quick-navigation-item:hover,
            .Quick-navigation-item.current {
                color: #fff;
            }

        .Scroll-progress-indicator {
            will-change: opacity, transform;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
            left: -10px;
            border-radius: 2px;
            position: absolute;
            top: 50%;
            opacity: 0;
            padding: 2em;
            -webkit-transform: translateX(200%) translateY(-50%);
            transform: translateX(200%) translateY(-50%);
            background-color: rgba(0,0,0,0.1);
        }

            .Scroll-progress-indicator.visible {
                -webkit-transform: translateX(-100%) translateY(-50%);
                transform: translateX(-100%) translateY(-50%);
                opacity: 1;
            }

        #A {
            background-color: #dc143c;
        }

        #B {
            background-color: #eb2049;
            height: 600px;
        }

        #C {
            background-color: #ed395d;
        }

        #D {
            background-color: #ef5271;
            height: 200px;
        }

        #E {
            background-color: #f26a85;
        }

        .Scroll-to-top {
            position: fixed;
            right: 20px;
            bottom: 0;
            background-color: rgba(0,0,0,0.2);
            border: none;
            color: rgba(255,255,255,0.5);
            font-size: 1.5rem;
            padding: 0.5em;
            cursor: pointer;
            opacity: 0;
            -webkit-transform: translateY(100%);
            transform: translateY(100%);
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
            outline: none;
        }

            .Scroll-to-top.visible {
                opacity: 1;
                -webkit-transform: translateY(0);
                transform: translateY(0);
            }

            .Scroll-to-top:hover {
                color: rgba(255,255,255,0.9);
            }
    </style>
</head>
<body>
    <nav class="Quick-navigation">
        <a href="#A" class="Quick-navigation-item">A</a>
        <a href="#B" class="Quick-navigation-item">B</a>
        <a href="#C" class="Quick-navigation-item">C</a>
        <a href="#D" class="Quick-navigation-item">D</a>
        <a href="#E" class="Quick-navigation-item">E</a>
        <div class="Scroll-progress-indicator"></div>
    </nav>
    <section id="A" class="js-scroll-step">
        <h1>A</h1>
    </section>
    <section id="B" class="js-scroll-step">
        <h1>B</h1>
    </section>
    <section id="C" class="js-scroll-step">
        <h1>C</h1>
    </section>
    <section id="D" class="js-scroll-step">
        <h1>D</h1>
    </section>
    <section id="E" class="js-scroll-step">
        <h1>E</h1>
    </section>
    <button class="Scroll-to-top">Scroll To Top</button>
    <script>
        (function () {
            //////////////////////
            // Utils
            //////////////////////
            function throttle(fn, delay, scope) {
                // Default delay
                delay = delay || 250;
                var last, defer;
                return function () {
                    var context = scope || this,
                    now = +new Date(),
                    args = arguments;
                    if (last && now < last + delay) {
                        clearTimeout(defer);
                        defer = setTimeout(function () {
                            last = now;
                            fn.apply(context, args);
                        }, delay);
                    } else {
                        last = now;
                        fn.apply(context, args);
                    }
                }
            }
            function extend(destination, source) {
                for (var k in source) {
                    if (source.hasOwnProperty(k)) {
                        destination[k] = source[k];
                    }
                }
                return destination;
            }
            //////////////////////
            // END Utils
            //////////////////////
            //////////////////////
            // Scroll Module
            //////////////////////
            var ScrollManager = (function () {
                var defaults = {
                    steps: null,
                    navigationContainer: null,
                    links: null,
                    scrollToTopBtn: null,
                    navigationElementClass: ‘.Quick-navigation‘,
                    currentStepClass: ‘current‘,
                    smoothScrollEnabled: true,
                    stepsCheckEnabled: true,
                    // Callbacks
                    onScroll: null,
                    onStepChange: function (step) {
                        var self = this;
                        var relativeLink = [].filter.call(options.links, function (link) {
                            link.classList.remove(self.currentStepClass);
                            return link.hash === ‘#‘ + step.id;
                        });
                        relativeLink[0].classList.add(self.currentStepClass);
                    },
                    // Provide a default scroll animation
                    smoothScrollAnimation: function (target) {
                        $(‘html, body‘).animate({
                            scrollTop: target
                        }, ‘slow‘);
                    }
                },
                options = {};
                // Privates
                var _animation = null,
                currentStep = null,
                throttledGetScrollPosition = null;
                return {
                    scrollPosition: 0,
                    init: function (opts) {
                        options = extend(defaults, opts);
                        if (options.steps === null) {
                            console.warn(‘Smooth scrolling require some sections or steps to scroll to :)‘);
                            return false;
                        }
                        // Allow to customize the animation engine ( jQuery / GSAP / velocity / ... )
                        _animation = function (target) {
                            target = typeof target === ‘number‘ ? target : $(target).offset().top;
                            return options.smoothScrollAnimation(target);
                        };
                        // Activate smooth scrolling
                        if (options.smoothScrollEnabled) this.smoothScroll();
                        // Scroll to top handling
                        if (options.scrollToTopBtn) {
                            options.scrollToTopBtn.addEventListener(‘click‘, function () {
                                options.smoothScrollAnimation(0);
                            });
                        }
                        // Throttle for performances gain
                        throttledGetScrollPosition = throttle(this.getScrollPosition).bind(this);
                        window.addEventListener(‘scroll‘, throttledGetScrollPosition);
                        window.addEventListener(‘resize‘, throttledGetScrollPosition);
                        this.getScrollPosition();
                    },
                    getScrollPosition: function () {
                        this.scrollPosition = window.pageYOffset || window.scrollY;
                        if (options.stepsCheckEnabled) this.checkActiveStep();
                        if (typeof options.onScroll === ‘function‘) options.onScroll(this.scrollPosition);
                    },
                    scrollPercentage: function () {
                        var body = document.body,
                        html = document.documentElement,
                        documentHeight = Math.max(body.scrollHeight, body.offsetHeight,
                        html.clientHeight, html.scrollHeight, html.offsetHeight);
                        var percentage = Math.round(this.scrollPosition / (documentHeight - window.innerHeight) * 100);
                        if (percentage < 0) percentage = 0;
                        if (percentage > 100) percentage = 100;
                        return percentage;
                    },
                    doSmoothScroll: function (e) {
                        if (e.target.nodeName === ‘A‘) {
                            e.preventDefault();
                            if (location.pathname.replace(/^\//, ‘‘) === e.target.pathname.replace(/^\//, ‘‘) && location.hostname === e.target.hostname) {
                                var targetStep = document.querySelector(e.target.hash);
                                targetStep ? _animation(targetStep) : console.warn(‘Hi! You should give an animation callback function to the Scroller module! :)‘);
                            }
                        }
                    },
                    smoothScroll: function () {
                        if (options.navigationContainer !== null) options.navigationContainer.addEventListener(‘click‘, this.doSmoothScroll);
                    },
                    checkActiveStep: function () {
                        var scrollPosition = this.scrollPosition;
                        [].forEach.call(options.steps, function (step) {
                            var bBox = step.getBoundingClientRect(),
                            position = step.offsetTop,
                            height = position + bBox.height;
                            if (scrollPosition >= position && scrollPosition < height && currentStep !== step) {
                                currentStep = step;
                                step.classList.add(self.currentStepClass);
                                if (typeof options.onStepChange === ‘function‘) options.onStepChange(step);
                            }
                            step.classList.remove(options.currentStepClass);
                        });
                    },
                    destroy: function () {
                        window.removeEventListener(‘scroll‘, throttledGetScrollPosition);
                        window.removeEventListener(‘resize‘, throttledGetScrollPosition);
                        options.navigationContainer.removeEventListener(‘click‘, this.doSmoothScroll);
                    }
                }
            })();
            //////////////////////
            // END scroll Module
            //////////////////////
            //////////////////////
            // APP init
            //////////////////////
            var scrollToTopBtn = document.querySelector(‘.Scroll-to-top‘),
            steps = document.querySelectorAll(‘.js-scroll-step‘),
            navigationContainer = document.querySelector(‘.Quick-navigation‘),
            links = navigationContainer.querySelectorAll(‘a‘),
            progressIndicator = document.querySelector(‘.Scroll-progress-indicator‘);
            ScrollManager.init({
                steps: steps,
                scrollToTopBtn: scrollToTopBtn,
                navigationContainer: navigationContainer,
                links: links,
                // Customize onScroll behavior
                onScroll: function () {
                    var percentage = ScrollManager.scrollPercentage();
                    percentage >= 90 ? scrollToTopBtn.classList.add(‘visible‘) : scrollToTopBtn.classList.remove(‘visible‘);
                    if (percentage >= 10) {
                        progressIndicator.innerHTML = percentage + "%";
                        progressIndicator.classList.add(‘visible‘);
                    } else {
                        progressIndicator.classList.remove(‘visible‘);
                    }
                },
                // Behavior when a step changes
                // default : highlight links
                // onStepChange: function (step) {},
                // Customize the animation with jQuery, GSAP or velocity
                // default : jQuery animate()
                // Eg with GSAP scrollTo plugin
                //smoothScrollAnimation: function (target) {
                //    TweenLite.to(window, 2, {scrollTo:{y:target}, ease:Power2.easeOut});
                //}
            });
            //////////////////////
            // END APP init
            //////////////////////
        })();
    </script>

</body>
</html>

jQuery右側懸浮樓層滾動電梯菜單

ase pan navi epc dex bottom -s event meta http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <he

如何用CSS和jQuery實現一個側滑導航菜單

his 事件監聽也有 font ajax size add tar 出現為了建立導航菜單，讓我們先看看html結構：<!DOCTYPE html><html lang="en"><head> <meta charset="U

基於jquery的簡潔樹形折疊菜單

play add event target -i -s max panel find 先上效果圖：最小的ul就是一個最小的樹枝，空間允許時可無限擴展。html如下： <div class="panel panel-default">

導航欄滑鼠懸浮彈出子菜單面板的實現方案

當滑鼠移動到導航欄某個字塊時，懸浮出一塊子菜單面板實現：在導航欄的字塊鑲嵌一塊要懸浮的div，設定display為none。 jquery設定字塊滑鼠懸浮mouseover的事件為：顯示懸浮div（設定display為block），同時獲取導航欄字塊的長度寬度，用於懸浮div的定

JQUERY右側懸浮返回頂部程式碼

這個是用JQURY實現的一鍵置頂功能直接複製貼上程式碼就可以用了哦~~ 具體效果如下比心♥~~ <!DOCTYPE html> <html lang="en"> &l

jQuery 之篩選器（TAB菜單實例）

所有 color code 1.5 ces col ont func content 代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

FineUIMvc新特性速遞（大間距模式，隱藏菜單垂直滾動條）

android 密集恐懼癥在線網站先來即將發布的 FineUIMvc 新版本會引入兩個重要的特性，用來提升用戶體驗，現在就來先睹為快吧：大間距模式我們已經支持的顯示模式有：緊湊模式，普通模式，大字體模式。緊湊模式：普通模式：大字體模式（一般適用於移動端顯示，iOS，Androi

利用jQuery設計橫/縱向菜單

cor 清晰 down content img javascrip ogg 當我菜單在網頁中，菜單扮演著“指路者”的角色。怎樣設計一個人性化的菜單呢。以下小編帶著大家一起做。效果圖：設計歷程： 1.首先利用html中的<ul>和&l

JS實例之滾動固定效果，實現頂部菜單固定效果。

rip bsp 實現 con tel body text 滾動 title 1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3

基於jQuery制作的手風琴折疊菜單

eee click ios mic 全部 none 折疊 mov int 初始化為全部隱藏點第一個，顯示第一個所隱藏的內容當點第二個的時候，第一個的內容隱藏，第二個欄目的內容顯示，以此類推下面是代碼部分 <!DOCTYPE html><html

基於jquery的延時導航菜單，可做延時觸發器！

position 延時 clear list spa time query display hid html如下： <div class="box"> <ul class="clear-fix">

Jquery 實現左右兩側菜單添加、移除

true height false menu easyui multipl java data selected JQ 實現左右兩側菜單添加、移除效果圖： JS代碼　　　　 function toRight(l, r, v) { $("#"

jQuery EasyUI 下拉菜單制作

align 退出 justify 控制 bsp 註意 easyu inf nbsp 下面的效果 1. 沒有任何效果的控制面板 2. 引入了樣式 3.下面有好幾個要註意的地方 3.1menu的值對應div裏面的id 3.2修改密碼的圖標，在div裏面添加的 3.3聯

24.jquery模擬菜單的效果

true cli hide tex 菜單 ref on() odi request <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&g

C# WPF 仿網易雲音樂（PC）左側菜單右側內容效果

ups tle onu urn mar mat 難點 -c nat 我們要做的效果是這樣的，左側是可折疊的菜單欄，右側是內容區域，點擊左側的菜單項右側內容區域則相應地切換。這篇博客標題起得比較隨意了，因為很多軟件、網站都有這種布局效果，所以請忽略。 wpf實現的話，我的辦

用jquery插件寫一個小米官網左側二級菜單

前端源碼 jquery javascript 插件知識點：靜態布局思路，jquery動態布局，代碼格式規範，jquery插件調用，鼠標滑動二級菜單構建。 html代碼： <div id="Tz_banner"> <ul>

JQuery右鍵菜單插件

query contex header con UNC action vid jquer als // JQuery右鍵菜單插件 $(function () { context.init({preventDoubleContext: false}); co

Bootstrap 下拉菜單和滾動監聽插件

bootstrap 下拉菜單和滾動監聽插件一．下拉菜單常規使用中，和組件方法一樣，代碼如下： //聲明式用法 <div class="dropdown"> <button class="btn btn-primary" data-toggle="dropdown"> 下拉菜

JQuery實現層級菜單

-i ldr down 筆記 borde 分享 20px size this 效果圖： HTML代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT

客服菜單上下滾動效果實現

saas on() div config jid function IV fig shai 這是html結構  <div class="service" id="service"> 　　<img src="./ima

jQuery右側懸浮樓層滾動 電梯菜單

相關推薦

jQuery右側懸浮樓層滾動電梯菜單