堆栈内存溢出
  简体   繁体   English

过渡项目符号点导航

[英]Transition bullet point nav

 原文  2020-10-14 10:19:35  8   1    javascript/ jquery/ css

问题描述

How can I create a sticky navbar with the vertical bar on the right and a bullet point (the circle):如何创建带有右侧垂直条和项目符号（圆圈）的粘性导航栏：

http://retail.cegid.com/fr/avril-2020-votre-newsletter-clients/ http://retail.cegid.com/fr/avril-2020-votre-newsletter-clients/

My HTML :我的 HTML ： 

 // Jquery nav /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav * * Copyright (c) 2010 Trevor Davis (http://trevordavis.net) * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery, see: * http://jquery.org/license * * @version 3.0.0 * * Example usage: * $('#nav').onePageNav({ * currentClass: 'current', * changeHash: false, * scrollSpeed: 750 * }); */ ;(function($, window, document, undefined){ // our plugin constructor var OnePageNav = function(elem, options){ this.elem = elem; this.$elem = $(elem); this.options = options; this.metadata = this.$elem.data('plugin-options'); this.$win = $(window); this.sections = {}; this.didScroll = false; this.$doc = $(document); this.docHeight = this.$doc.height(); }; // the plugin prototype OnePageNav.prototype = { defaults: { navItems: 'a', currentClass: 'current', changeHash: false, easing: 'swing', filter: '', scrollSpeed: 750, scrollThreshold: 0.5, begin: false, end: false, scrollChange: false }, init: function() { // Introduce defaults that can be extended either // globally or using an object literal. this.config = $.extend({}, this.defaults, this.options, this.metadata); this.$nav = this.$elem.find(this.config.navItems); //Filter any links out of the nav if(this.config.filter !== '') { this.$nav = this.$nav.filter(this.config.filter); } //Handle clicks on the nav this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this)); //Get the section positions this.getPositions(); //Handle scroll changes this.bindInterval(); //Update the positions on resize too this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this)); return this; }, adjustNav: function(self, $parent) { self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass); $parent.addClass(self.config.currentClass); }, bindInterval: function() { var self = this; var docHeight; self.$win.on('scroll.onePageNav', function() { self.didScroll = true; }); self.t = setInterval(function() { docHeight = self.$doc.height(); //If it was scrolled if(self.didScroll) { self.didScroll = false; self.scrollChange(); } //If the document height changes if(docHeight !== self.docHeight) { self.docHeight = docHeight; self.getPositions(); } }, 250); }, getHash: function($link) { return $link.attr('href').split('#')[1]; }, getPositions: function() { var self = this; var linkHref; var topPos; var $target; self.$nav.each(function() { linkHref = self.getHash($(this)); $target = $('#' + linkHref); if($target.length) { topPos = $target.offset().top; self.sections[linkHref] = Math.round(topPos); } }); }, getSection: function(windowPos) { var returnValue = null; var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold); for(var section in this.sections) { if((this.sections[section] - windowHeight) < windowPos) { returnValue = section; } } return returnValue; }, handleClick: function(e) { var self = this; var $link = $(e.currentTarget); var $parent = $link.parent(); var newLoc = '#' + self.getHash($link); if(!$parent.hasClass(self.config.currentClass)) { //Start callback if(self.config.begin) { self.config.begin(); } //Change the highlighted nav item self.adjustNav(self, $parent); //Removing the auto-adjust on scroll self.unbindInterval(); //Scroll to the correct position self.scrollTo(newLoc, function() { //Do we need to change the hash? if(self.config.changeHash) { window.location.hash = newLoc; } //Add the auto-adjust on scroll back in self.bindInterval(); //End callback if(self.config.end) { self.config.end(); } }); } e.preventDefault(); }, scrollChange: function() { var windowTop = this.$win.scrollTop(); var position = this.getSection(windowTop); var $parent; //If the position is set if(position !== null) { $parent = this.$elem.find('a[href$="#' + position + '"]').parent(); //If it's not already the current section if(!$parent.hasClass(this.config.currentClass)) { //Change the highlighted nav item this.adjustNav(this, $parent); //If there is a scrollChange callback if(this.config.scrollChange) { this.config.scrollChange($parent); } } } }, scrollTo: function(target, callback) { var offset = $(target).offset().top; $('html, body').animate({ scrollTop: offset }, this.config.scrollSpeed, this.config.easing, callback); }, unbindInterval: function() { clearInterval(this.t); this.$win.unbind('scroll.onePageNav'); } }; OnePageNav.defaults = OnePageNav.prototype.defaults; $.fn.onePageNav = function(options) { return this.each(function() { new OnePageNav(this, options).init(); }); }; })( jQuery, window , document ); //Myjquery $('.uagb-toc__list-wrap').append('<div id="menu_slider"><div id="menu_slider_circle" style="top: 50%;"></div></div>'); console.log('uuuuuuuuuuuuuuu'); var $nav = $('.uagb-toc__list-wrap'); $nav.onePageNav();
 .wp-block-uagb-table-of-contents { margin-top: 2rem; background-color: white; } .wp-block-uagb-table-of-contents ul { margin: 0 !important; } .wp-block-uagb-table-of-contents ul li { list-style: none; } .wp-block-uagb-table-of-contents ul li:before { content: none; } .wp-block-uagb-table-of-contents ul li.current a { font-weight: bold; opacity: 1; transform: scale(1); } .wp-block-uagb-table-of-contents ul li a { color: red; font-weight: 700; text-decoration: none; } .uagb-toc__wrap { background: teal; display: flex !important; flex-direction: column; align-items: flex-end; } .uagb-toc__wrap .uagb-toc__title-wrap span.uag-toc__collapsible-wrap { display: none; } /* ////////////////////////////////// */ /* //////////// MENU ///////////// */ /* //////////////////////////////// */ .uagb-toc__list-wrap { position: fixed; top: 50%; right: 60px; -webkit-transform: translateY(-50%); transform: translateY(-50%); /* background: rgba(255, 0, 0, 0.31); */ } .uagb-toc__list { color: #002c52; padding: 0 30px; } .uagb-toc__list li { display: block; text-align: right; opacity: 0.5; padding: 1vh 0; cursor: pointer; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform: scale(0.9); transform: scale(0.9); text-shadow: 1px 1px 9px #fff, 1px 1px 4px #fff; } #menu_slider { position: absolute; width: 2px; height: 100%; left: 0; top: 0; background: rgba(0, 44, 82, 0.4); } #menu_slider_circle { position: absolute; top: 0%; left: 1px; width: 10px; height: 10px; border-radius: 30px; background: rgba(0, 44, 82, 1); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } #menu_slider_circle::before { content: ''; position: absolute; top: -8px; left: -8px; bottom: -8px; right: -8px; border-radius: 60px; background: rgba(0, 44, 82, .1); } #menu_titles, #menu_slider, #menu_slider_circle, #menu.white #menu_slider_circle::before { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } #menu.white #menu_titles { color: #fff; } #menu.white #menu_titles span { text-shadow: 1px 1px 9px #002c52, 1px 1px 4px #002c52; } #menu.white #menu_slider { background: rgba(255, 255, 255, .4); } #menu.white #menu_slider_circle { background: rgba(255, 255, 255, 1); } #menu.white #menu_slider_circle::before { background: rgba(255, 255, 255, .1); } #menu_toggle { position: absolute; width: 60px; height: 60px; top: 0; left: -60px; background: #002c52 url(img/burger.svg) center no-repeat; display: none; background-size: 80%; } #menu.showed #menu_toggle { background-image: url(img/cross.svg); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <head> <script src="https://code.jquery.com/jquery-3.5.0.js"></script> </head> <body> <div class="wp-block-column" style="flex-basis:66.66%"> <span id="titre-h2" class="uag-toc__heading-anchor"></span> <h2 id="1-de-ere-rzer">Titre H2</h2> <p>ere&nbsp;<strong>Lorem Ipsum</strong>&nbsp;est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de pimprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas faitre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.e&nbsp;<strong>Lorem Ipsum</strong>&nbsp;est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p> <p>ze </p> <span id="titre-h3" class="uag-toc__heading-anchor"></span> <h3>Titre H3</h3> <span id="titre-h4" class="uag-toc__heading-anchor"></span> <h4>Titre H4</h4> <p> rze</p> <span id="autre-titre-h2" class="uag-toc__heading-anchor"></span> <h2 id="2-r-ze">Autre titre H2</h2> <p>r zerze rze </p> <p> rz</p> <div class="wp-block-media-text alignwide is-stacked-on-mobile"> <figure class="wp-block-media-text__media"><img src="http://jobs.alterway.tma/wp-content/uploads/sites/2/2020/05/xgu472hf2_by_lariliikala.jpg" alt="" class="wp-image-604" srcset="http://jobs.alterway.tma/wp-content/uploads/sites/2/2020/05/xgu472hf2_by_lariliikala.jpg 980w, http://jobs.alterway.tma/wp-content/uploads/sites/2/2020/05/xgu472hf2_by_lariliikala-300x188.jpg 300w, http://jobs.alterway.tma/wp-content/uploads/sites/2/2020/05/xgu472hf2_by_lariliikala-768x480.jpg 768w" sizes="(max-width: 980px) 100vw, 980px"></figure> <div class="wp-block-media-text__content"> <p class="has-large-font-size">ddazedazdazdazdazdazda</p> </div> </div> </div> <div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-undefined uagb-block-84b71cc1-d86a-477b-a4d8-13ad158cfc23" data-scroll="true" data-offset="30" data-delay="800"> <div class="uagb-toc__wrap"> <div class="uagb-toc__title-wrap uagb-toc__is-collapsible"> <div class="uagb-toc__title">Sommaire</div> <span class="uag-toc__collapsible-wrap"> <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512"> <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path> </svg> </span> </div> <div class="uagb-toc__list-wrap" data-headers=""> <ul class="uagb-toc__list"> <li> <a href="#titre-h2">Titre H2</a> </li> <ul class="uagb-toc__list"> <li> <a href="#titre-h3">Titre H3</a> </li> <ul class="uagb-toc__list"> <li> <a href="#titre-h4">Titre H4</a> </li> </ul> </ul> <li> <a href="#autre-titre-h2">Autre titre H2</a> </li> </ul> </div> </div> </div> </body> </html>

{# Menu ancres #}
<div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-undefined uagb-block-84b71cc1-d86a-477b-a4d8-13ad158cfc23" data-scroll="true" data-offset="30" data-delay="800">
    <div class="uagb-toc__wrap">
        <div class="uagb-toc__title-wrap uagb-toc__is-collapsible">
            <div class="uagb-toc__title">Sommaire</div>
            <span class="uag-toc__collapsible-wrap">
                <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 320 512">
                    <path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path>
                </svg>
            </span>
        </div>
        <div class="uagb-toc__list-wrap" data-headers="[{&quot;tag&quot;:2,&quot;text&quot;:&quot;Titre H2&quot;,&quot;link&quot;:&quot;titre-h2&quot;,&quot;content&quot;:&quot;Titre H2&quot;,&quot;level&quot;:0},{&quot;tag&quot;:3,&quot;text&quot;:&quot;Titre H3&quot;,&quot;link&quot;:&quot;titre-h3&quot;,&quot;content&quot;:&quot;Titre H3&quot;,&quot;level&quot;:1},{&quot;tag&quot;:4,&quot;text&quot;:&quot;Titre H4&quot;,&quot;link&quot;:&quot;titre-h4&quot;,&quot;content&quot;:&quot;Titre H4&quot;,&quot;level&quot;:2},{&quot;tag&quot;:2,&quot;text&quot;:&quot;Autre titre H2&quot;,&quot;link&quot;:&quot;autre-titre-h2&quot;,&quot;content&quot;:&quot;Autre titre H2&quot;,&quot;level&quot;:0}]">
            <ul class="uagb-toc__list">
                <li>
                    <a href="#titre-h2">Titre H2</a>
                </li>
                <ul class="uagb-toc__list">
                    <li>
                        <a href="#titre-h3">Titre H3</a>
                    </li>
                    <ul class="uagb-toc__list">
                        <li>
                            <a href="#titre-h4">Titre H4</a>
                        </li>
                    </ul>
                </ul>
                <li>
                    <a href="#autre-titre-h2">Autre titre H2</a>
                </li>
            </ul>
        </div>
    </div>
</div>

Edit js:编辑js：

var fn_menu_ancres = function () {
    $('.uagb-toc__list-wrap').append('<div id="menu_slider"><div id="menu_slider_circle" style="top: 50%;"></div></div>');
    console.log('uuuuuuuuuuuuuuu');



};

Edit CSS :编辑 CSS ：

    .wp-block-uagb-table-of-contents {
    margin-top: 2rem;
    .uagb-toc__list-wrap{
        // position: relative;
    }

    ul {
        li {
            list-style: none;
            &:before {
                content: none;
            }

            &.active {
                a {
                    font-weight: bold;
                    opacity: 1;
                    transform: scale(1);
                }
            }

            a {
                color: teal;
                font-weight: $fw-light;
                text-decoration: none;
            }
        }
    }
}

.uagb-toc__wrap {
    display: flex!important;
    flex-direction: column;
    align-items: flex-end;

    .uagb-toc__title-wrap {
        span.uag-toc__collapsible-wrap {
            display: none;
        }
    }
}




/* ////////////////////////////////// */
/* ////////////  MENU  ///////////// */
/* //////////////////////////////// */


.uagb-toc__list-wrap {
    position: fixed;
    top: 50%;
    right: 60px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
/*    background: rgba(255, 0, 0, 0.31);*/
}


.uagb-toc__list {
    // font-size: 1.6em;
    color: #002c52;
    padding: 0 30px;
}

.uagb-toc__list li{
    display: block;
    text-align: right;
    opacity: .5;
    padding: 1vh 0;
    cursor: pointer;
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
    -webkit-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
    -webkit-transform: scale(.9);
            transform: scale(.9);

    text-shadow: 1px 1px 9px #fff, 1px 1px 4px #fff;
}

.uagb-toc__list li:hover {
/*    font-size: 1.6em;*/
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}

.uagb-toc__list li.active {
/*    font-size: 1.6em;*/
    font-weight: bold;
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
}

#menu_slider {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 44, 82, 0.4);
}

#menu_slider_circle {
    position: absolute;
    top: 0%;
    left: 1px;
    width: 10px;
    height: 10px;
    border-radius: 30px;
    background: rgba(0, 44, 82, 1);
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
}

#menu_slider_circle::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    bottom: -8px;
    right: -8px;
    border-radius: 60px;
    background: rgba(0, 44, 82, .1);
}

#menu_titles,
#menu_slider,
#menu_slider_circle,
#menu.white #menu_slider_circle::before {
    -webkit-transition: all .4s ease;
            transition: all .4s ease;
}

#menu.white #menu_titles{
    color: #fff;
}

#menu.white #menu_titles span{
    text-shadow: 1px 1px 9px rgb(0, 44, 82), 1px 1px 4px rgb(0, 44, 82);
}

#menu.white #menu_slider {
    background: rgba(255, 255, 255, .4);
}

#menu.white #menu_slider_circle {
    background: rgba(255, 255, 255, 1);
}

#menu.white #menu_slider_circle::before {
    background: rgba(255, 255, 255, .1);
}

#menu_toggle {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 0;
    left: -60px;
    background: #002c52 url(img/burger.svg) center no-repeat;
    display: none;
    background-size: 80%;
}

#menu.showed #menu_toggle {
    background-image: url(img/cross.svg);
}

@media screen and (max-width: 1460px) {
    #menu {
        right: 30px;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
    }
}

@media screen and (max-width: 1023px) {
    #menu, #menu.white {
        background: #fff;
        right: 0;
        height: 100%;
        top: 0;
        box-shadow: 0 0 0px rgba(0, 44, 82, .4);
        -webkit-transition: all .4s ease;
                transition: all .4s ease;
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
    #menu.showed {
        box-shadow: 0 0 60px rgba(0, 44, 82, .4);
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    #menu_titles {
        padding: 0;
    }
    #menu.white #menu_titles{
        color: #002c52;
    }
    #menu_titles span{
        display: block;
        padding: 1vh 30px;
        border-bottom: 1px solid rgba(0, 44, 82, .4);
        opacity: 1;
        -webkit-transform: scale(1);
                transform: scale(1);
    }
    .uagb-toc__list li.active {
        background: #002c52;
        font-weight: 400;
        color: #fff;
    }

    #menu_toggle {
        display: block;
    }
    #menu_slider {
        display: none;
    }

    #menu.white #menu_slider {
        background: rgba(0, 44, 82, .4);
    }

    #menu.white #menu_slider_circle {
        background: rgba(20, 44, 82, 1);
    }

    #menu.white #menu_slider_circle::before {
        background: rgba(20, 44, 82, .1);
    }
}

I have the JS that makes it sticky, but I need the vertical bar and the bullet point ((the circle).我有使它粘的 JS，但我需要垂直条和项目符号（（圆圈）。

PS: I can't touch the HTML, I have to make all of this with only CSS and JS. PS：我无法触摸 HTML，我必须仅使用 CSS 和 JS 来完成所有这些。

Here is a screenshot : -SCROLL MORE- https://ibb.co/fNp12pH这是屏幕截图：-滚动更多- https://ibb.co/fNp12pH

1 个解决方案

解决方案1
 0 已采纳  2020-10-14 16:06:52

Here's my solution to the problem.这是我对问题的解决方案。 It would be preferable to carry this out with CSS, but the constraint of not changing around the HTML made that impossible (as far as I can tell).最好使用 CSS 来执行此操作，但不围绕 HTML 进行更改的约束使这变得不可能（据我所知）。

A few things to note: You're using a JQuery plugin which you've just copied and pasted here.需要注意的几点： 您使用的是刚刚复制并粘贴到此处的 JQuery 插件。 As it turns out, this was rather fortuitous because I had to fix a problem with the plug-in itself.事实证明，这是相当偶然的，因为我必须解决插件本身的问题。 I needed the begin callback to be passing the element being clicked on, but it wasn't doing this, so I added it in. This means though that this solution wont work with the OnePageNav plug-in as it stands.我需要begin回调来传递被点击的元素，但它没有这样做，所以我添加了它。这意味着虽然这个解决方案不能与 OnePageNav 插件一起使用。 I personally don't think it matters if you just import it into your own code because it isn't very big, and also it doesn't seem to be maintained anymore, so there probably wont be any more releases of it anyway.我个人认为如果你只是将它导入到你自己的代码中并不重要，因为它不是很大，而且它似乎不再被维护，所以无论如何可能不会有更多的版本。

I've also edited your code quite a bit in order to remove things which weren't relevant to the problem in hand to make it easier for me to understand.我还对您的代码进行了大量编辑，以删除与手头问题无关的内容，以便我更容易理解。 I also want to the solution to be as general as possible so that other people might be able to benefit from this too.我还希望解决方案尽可能通用，以便其他人也可以从中受益。 I've kept the 'spirit' of your code though so I don't think you should have any problems should you want to adopt this solution.不过，我保留了您代码的“精神”，因此如果您想采用此解决方案，我认为您不应该遇到任何问题。 

 // Jquery nav /* * jQuery One Page Nav Plugin * http://github.com/davist11/jQuery-One-Page-Nav * * Copyright (c) 2010 Trevor Davis (http://trevordavis.net) * Dual licensed under the MIT and GPL licenses. * Uses the same license as jQuery, see: * http://jquery.org/license * * @version 3.0.0 * * Example usage: * $('#nav').onePageNav({ * currentClass: 'current', * changeHash: false, * scrollSpeed: 750 * }); */ ; (function($, window, document, undefined) { // our plugin constructor var OnePageNav = function(elem, options) { this.elem = elem; this.$elem = $(elem); this.options = options; this.metadata = this.$elem.data('plugin-options'); this.$win = $(window); this.sections = {}; this.didScroll = false; this.$doc = $(document); this.docHeight = this.$doc.height(); }; // the plugin prototype OnePageNav.prototype = { defaults: { navItems: 'a', currentClass: 'current', changeHash: false, easing: 'swing', filter: '', scrollSpeed: 750, scrollThreshold: 0.5, begin: false, end: false, scrollChange: false }, init: function() { // Introduce defaults that can be extended either // globally or using an object literal. this.config = $.extend({}, this.defaults, this.options, this.metadata); this.$nav = this.$elem.find(this.config.navItems); //Filter any links out of the nav if (this.config.filter !== '') { this.$nav = this.$nav.filter(this.config.filter); } //Handle clicks on the nav this.$nav.on('click.onePageNav', $.proxy(this.handleClick, this)); //Get the section positions this.getPositions(); //Handle scroll changes this.bindInterval(); //Update the positions on resize too this.$win.on('resize.onePageNav', $.proxy(this.getPositions, this)); return this; }, adjustNav: function(self, $parent) { self.$elem.find('.' + self.config.currentClass).removeClass(self.config.currentClass); $parent.addClass(self.config.currentClass); }, bindInterval: function() { var self = this; var docHeight; self.$win.on('scroll.onePageNav', function() { self.didScroll = true; }); self.t = setInterval(function() { docHeight = self.$doc.height(); //If it was scrolled if (self.didScroll) { self.didScroll = false; self.scrollChange(); } //If the document height changes if (docHeight !== self.docHeight) { self.docHeight = docHeight; self.getPositions(); } }, 250); }, getHash: function($link) { return $link.attr('href').split('#')[1]; }, getPositions: function() { var self = this; var linkHref; var topPos; var $target; self.$nav.each(function() { linkHref = self.getHash($(this)); $target = $('#' + linkHref); if ($target.length) { topPos = $target.offset().top; self.sections[linkHref] = Math.round(topPos); } }); }, getSection: function(windowPos) { var returnValue = null; var windowHeight = Math.round(this.$win.height() * this.config.scrollThreshold); for (var section in this.sections) { if ((this.sections[section] - windowHeight) < windowPos) { returnValue = section; } } return returnValue; }, handleClick: function(e) { var self = this; var $link = $(e.currentTarget); var $parent = $link.parent(); var newLoc = '#' + self.getHash($link); if (!$parent.hasClass(self.config.currentClass)) { //Start callback if (self.config.begin) { self.config.begin($link); } //Change the highlighted nav item self.adjustNav(self, $parent); //Removing the auto-adjust on scroll self.unbindInterval(); //Scroll to the correct position self.scrollTo(newLoc, function() { //Do we need to change the hash? if (self.config.changeHash) { window.location.hash = newLoc; } //Add the auto-adjust on scroll back in self.bindInterval(); //End callback if (self.config.end) { self.config.end(); } }); } e.preventDefault(); }, scrollChange: function() { var windowTop = this.$win.scrollTop(); var position = this.getSection(windowTop); var $parent; //If the position is set if (position !== null) { $parent = this.$elem.find('a[href$="#' + position + '"]').parent(); //If it's not already the current section if (!$parent.hasClass(this.config.currentClass)) { //Change the highlighted nav item this.adjustNav(this, $parent); //If there is a scrollChange callback if (this.config.scrollChange) { this.config.scrollChange($parent); } } } }, scrollTo: function(target, callback) { var offset = $(target).offset().top; $('html, body').animate({ scrollTop: offset }, this.config.scrollSpeed, this.config.easing, callback); }, unbindInterval: function() { clearInterval(this.t); this.$win.unbind('scroll.onePageNav'); } }; OnePageNav.defaults = OnePageNav.prototype.defaults; $.fn.onePageNav = function(options) { return this.each(function() { new OnePageNav(this, options).init(); }); }; })(jQuery, window, document); var $nav = $('.uagb-toc__list-wrap'); function calculatePercentage(currentEl, containerEl) { const { y, height } = currentEl.getBoundingClientRect(); const { y: containerY, height: containerHeight } = containerEl.getBoundingClientRect(); const offsetTop = y - containerY; return (offsetTop + (height / 2)) / containerHeight * 100 } $nav.onePageNav({ currentClass: 'current', begin: function($link) { updateMenuSlider($link[0]); }, scrollChange: function($currentListItem) { updateMenuSlider($currentListItem[0]); }, }); function updateMenuSlider(currentEl) { const containerEl = $('.uagb-toc__list-wrap')[0]; const percentage = calculatePercentage(currentEl, containerEl); positionCircle(percentage); } function positionCircle(percent) { $('#menu_slider_circle').css('top', percent + '%'); }
 .wp-block-uagb-table-of-contents { margin-top: 2rem; background-color: white; } .uagb-toc__list-wrap { position: fixed; top: 50%; right: 60px; transform: translateY(-50%); } ul.uagb-toc__list { margin: 0; color: #002c52; background: antiquewhite; padding: 0 30px; } li { list-style: none; display: block; text-align: right; opacity: 0.5; padding: 1vh 0; cursor: pointer; transition: all 0.4s ease; transform-origin: 100% 50%; transform: scale(0.9); text-shadow: 1px 1px 9px #fff, 1px 1px 4px #fff; } li a { color: blue; font-weight: 700; text-decoration: none; } li.current a { font-weight: bold; color: red; opacity: 1; transform: scale(1); } #menu_slider { position: absolute; width: 2px; height: 100%; left: 0; top: 0; background: rgba(0, 44, 82, 0.4); } #menu_slider_circle { position: absolute; top: 0%; left: 1px; width: 10px; height: 10px; border-radius: 30px; background: rgba(0, 44, 82, 1); transform: translateX(-50%) translateY(-50%); transition: .4s top ease; } #menu_slider_circle::before { content: ''; position: absolute; top: -8px; left: -8px; bottom: -8px; right: -8px; border-radius: 60px; background: rgba(0, 44, 82, .1); }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wp-block-column" style="flex-basis:66.66%"> <span id="titre-h2" class="uag-toc__heading-anchor"></span> <h2 id="1-de-ere-rzer">Titre H2</h2> <p>est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <span id="titre-h3" class="uag-toc__heading-anchor"></span> <h3>Titre H3</h3> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <span id="titre-h4" class="uag-toc__heading-anchor"></span> <h4>Titre H4</h4> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <span id="autre-titre-h2" class="uag-toc__heading-anchor"></span> <h2 id="2-r-ze">Autre titre H2</h2> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> <p>implement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réa.</p> </div> <div class="wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-undefined uagb-block-84b71cc1-d86a-477b-a4d8-13ad158cfc23" data-scroll="true" data-offset="30" data-delay="800"> <div class="uagb-toc__wrap"> <div class="uagb-toc__list-wrap" data-headers=""> <div id="menu_slider"> <div id="menu_slider_circle"></div> </div> <ul class="uagb-toc__list"> <li> <a href="#titre-h2">Titre H2</a> </li> <ul class="uagb-toc__list"> <li> <a href="#titre-h3">Titre H3</a> </li> <ul class="uagb-toc__list"> <li> <a href="#titre-h4">Titre H4</a> </li> </ul> </ul> <li> <a href="#autre-titre-h2">Autre titre H2</a> </li> </ul> </div> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 导航菜单中的下划线过渡 - Underline transition in Nav Menu Bullet Point 不动，只有图像 - Bullet Point not moving, only the image is 如何在文本区域添加项目符号点？ - How to add bullet point in a textarea? 导航元素具有jQuery过渡的Javascript - Javascript with jQuery transition of nav element 如何在按钮单击时将项目符号点添加到字段集？ - How to add bullet point to fieldset on button click? 动态突出显示时，将项目符号添加到<p>？ - Add a Bullet Point to <p> when highlighted dynamically? 正则表达式是否可以检测使用的项目符号类型及其顺序以根据项目符号层次结构自动缩进文本？ - Is detecting bullet point types used and their order to automatically indent text based on bullet point hierarchy possible with Regexes? 过渡效果-尝试创建最简单的滑出导航 - Transition effect - Trying to create the simplest slideout nav 页面转换导致移动导航不可点击 - Page transition causing mobile nav to be unclickable 向侧导航栏添加过渡 [已解决] - Adding transition to Side nav bar [SOLVED]
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM