necesito comprimir mi código de manera que sea una función reutilizable, dado que mi experiencia en javascript aun esta muy verde, necesito consejo de gente experta. Dispongo de este código.
document.addEventListener("DOMContentLoaded", function (event) {
$(window).scroll(function () {
var ladresortTop = $("#unserlandressort").offset().top;
var landressortBottom = $("#unserlandressort").offset().top + $("#historie").outerHeight();
var impressionenTop = $("#impressionen").offset().top;
var impressionenBottom = $("#impressionen").offset().top + $("#impressionen").outerHeight();
var historieTop = $("#historie").offset().top;
var historieBottom = $("#historie").offset().top + $("#historie").outerHeight();
var ortTop = $("#aktivitaeten").offset().top;
var ortBottom = $("#aktivitaeten").offset().top + $("#historie").outerHeight();
//var tagebuchTop = $("#tagebuch").offset().top;
//var tagebuchBottom = $("#tagebuch").offset().top + $("#tagebuch").outerHeight();
var anreiseTop = $("#anreise").offset().top;
var anreiseBottom = $("#anreise").offset().top + $("#anreise").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
var top_of_screen = $(window).scrollTop();
if ((bottom_of_screen > ladresortTop) && (top_of_screen < landressortBottom)) {
$('#one i').css({
"border-radius": "50px",
"background": "white",
"color": "#796029"
})
} else {
$('#one i').css({
"border": "none",
"border-radius": "none",
"background": "none",
"font-size": "0.8em",
"color" : "#232653"
})
}
if ((bottom_of_screen > impressionenTop) && (top_of_screen < impressionenBottom)) {
$('#two i').css({
"border-radius": "50px",
"background": "white",
"color": "#796029"
})
} else {
$('#two i').css({
"border": "none",
"border-radius": "none",
"background": "none",
"font-size": "0.8em",
"color" : "#232653"
})
}
if ((bottom_of_screen > historieTop) && (top_of_screen < historieBottom)) {
$('#three i').css({
"border": "1px solid white",
"border-radius": "50px",
"background": "white",
"color": "#796029"
})
} else {
$('#three i').css({
"border": "none",
"border-radius": "none",
"background": "none",
"font-size": "0.8rem",
"color" : "#232653"
})
}
if ((bottom_of_screen > ortTop) && (top_of_screen < ortBottom)) {
$('#four i').css({
"border": "1px solid white",
"border-radius": "50px",
"background": "white",
"color" : "#796029"
})
} else {
$('#four i').css({
"border": "none",
"border-radius": "none",
"background": "none",
"font-size": "0.8rem",
"color" : "#232653"
})
}
if ((bottom_of_screen > anreiseTop) && (top_of_screen < anreiseBottom)) {
$('#six i').css({
"border": "1px solid white",
"border-radius": "50px",
"background": "white",
"color" : "#796029"
})
} else {
$('#six i').css({
"border": "none",
"border-radius": "none",
"background": "none",
"font-size": "0.8rem",
"color" : "#232653"
})
}
});
});
.events {
flex-direction: column;
}
.ressortinfo {
position: relative;
}
.ressortinfo .leftSection {
background-color: rgba(19, 22, 55, 0.1);
}
.ressortmenu {
position: sticky;
top: 10%;
float: right;
margin-right: 2em;
padding-top: 4em;
}
.ressortmenu ul {
text-align: right;
padding: .75rem;
}
.ressortmenu ul > li {
padding: 15px 0;
list-style: none;
position: relative;
}
.ressortmenu ul > li i {
margin-left: 10px;
font-size: 0.8em;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
.ressortmenu ul > li:after {
content: '';
position: absolute;
height: 100%;
width: 3px;
top: 30px;
right: 4px;
z-index: -1;
background-color: #232653;
}
.ressortmenu ul > li:last-child:after {
display: none;
}
.ressortmenu ul > li:focus i, .ressortmenu ul > li:active i {
color: blue;
}
.ressortmenu span {
color: #232653;
font-size: 1.3rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" />
<section class="ressortinfo">
<div class="columns is-gapless">
<div class="column is-one-quarter leftSection">
<?php #progressbar ?>
<div class="ressortmenu">
<div class="column is-9 is-offset-3">
<?php the_field('menu_text_editor'); ?>
</div>
<ul class="is-flex events">
<li id="one">
<a href="#unserlandressort">
<span>Unser Landresort</span>
<i class="fa fa-circle" aria-hidden="true"></i>
</a>
</li>
<li id="two">
<a href="#impressionen">
<span>Impressionen</span>
<i class="fa fa-circle" aria-hidden="true"></i>
</a>
</li>
<li id="three">
<a href="#historie">
<span> Denkmal & Historie</span>
<i class="fa fa-circle" aria-hidden="true"></i></a>
</li>
<li id="four">
<a href="#aktivitaeten">
<span>Aktivitäten</span>
<i class="fa fa-circle" aria-hidden="true"></i>
</a>
</li>
<li id="six">
<a href="#anreise">
<span>Anreise</span>
<i class="fa fa-circle" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="column is-three-quarters">
<section id="unserlandressort">
</section>
</div>
El código en total funciona, pero al trabajar con id especificas, no puedo volver a usarlo en otra pagina, con diferentes id de anclajes, por lo tanto el código no es que sea inútil pero no es bueno ni por asomo y obviamente me gustaría mejorarlo bastante, pero no se como lo puedo hacer "reutilizable" y comprimido. He intentado usarlo tal cual en otro archivo, pero me falla la función completamente y la verdad es que ya no se que mas puedo hacer. Gracias
EDITO Y ADJUNTO
Aqui dejo un enlace a jsFiddle con mas contenido, pero por alguna razon la barra de menu no acepta todo e manera correcta
document.getElementsByTagName('div')[0]
.id
s deben ser únicas en elDOM
de la página actual. Pero hasta donde tengo entendido, tu puedes usar la mismaid
en diferentes páginas. De ese modo puedes hacer el código que se repite reusable, manteniendo un JS común para todas estas páginas.id
que empiezan con almohadilla :#unserlandressort
yid
s repetidos. Por favor edita tu pregunta y añade el código html necesario. Me gustaría ayudar.