過渡項目符號點導航
[英]Transition bullet point nav
問題描述
如何創建帶有右側垂直條和項目符號（圓圈）的粘性導航欄：
http://retail.cegid.com/fr/avril-2020-votre-newsletter-clients/
我的 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 <strong>Lorem Ipsum</strong> 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 <strong>Lorem Ipsum</strong> 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="[{"tag":2,"text":"Titre H2","link":"titre-h2","content":"Titre H2","level":0},{"tag":3,"text":"Titre H3","link":"titre-h3","content":"Titre H3","level":1},{"tag":4,"text":"Titre H4","link":"titre-h4","content":"Titre H4","level":2},{"tag":2,"text":"Autre titre H2","link":"autre-titre-h2","content":"Autre titre H2","level":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>
編輯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');
};
編輯 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);
}
}
我有使它粘的 JS，但我需要垂直條和項目符號（（圓圈）。
PS：我無法觸摸 HTML，我必須僅使用 CSS 和 JS 來完成所有這些。
這是屏幕截圖：-滾動更多- https://ibb.co/fNp12pH
1 個解決方案
解決方案1
0 已采納 2020-10-14 16:06:52
這是我對問題的解決方案。 最好使用 CSS 來執行此操作，但不圍繞 HTML 進行更改的約束使這變得不可能（據我所知）。
需要注意的幾點： 您使用的是剛剛復制並粘貼到此處的 JQuery 插件。 事實證明，這是相當偶然的，因為我必須解決插件本身的問題。 我需要begin回調來傳遞被點擊的元素，但它沒有這樣做，所以我添加了它。這意味着雖然這個解決方案不能與 OnePageNav 插件一起使用。 我個人認為如果你只是將它導入到你自己的代碼中並不重要，因為它不是很大，而且它似乎不再被維護，所以無論如何可能不會有更多的版本。
我還對您的代碼進行了大量編輯，以刪除與手頭問題無關的內容，以便我更容易理解。 我還希望解決方案盡可能通用，以便其他人也可以從中受益。 不過，我保留了您代碼的“精神”，因此如果您想采用此解決方案，我認為您不應該遇到任何問題。
// 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>
正則表達式是否可以檢測使用的項目符號類型及其順序以根據項目符號層次結構自動縮進文本？
[英]Is detecting bullet point types used and their order to automatically indent text based on bullet point hierarchy possible with Regexes?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.