利用jQuery实现右侧悬浮楼层滚动代码



16 61 21



特效描述:利用jQuery实现 右侧悬浮 楼层滚动代码,利用jQuery实现右侧悬浮楼层滚动代码

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>

2. HTML代码

<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 图片滑动 图片滑块 全屏切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到