过渡子弹点导航
过渡子弹点导航
提问于 2020-10-14 10:19:35
如何创建一个在右边的垂直条和一个圆点(圆圈)的粘稠的肚脐：
我的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来完成这一切。
下面是一个截图：-SCROLL MORE- https://ibb.co/fNp12pH
回答 1
Stack Overflow用户
回答已采纳
发布于 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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64351228
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号