Вставка классов посредством языка сценариев JavaScript

Мне нужно меню, которое, сделать scroll, прикрепляется в части наверху, чтобы способствовать тому, чтобы он был прикреплен, я был должен делать класс так называемый "fixed" и применять ее в момент загружения с scroll.

Вопрос состоит, в том, что класс "fixed", после того, как применяется, не получает в наследство ширину или query контента.

Таким образом будь нормальным:

<div class="hoja">
<ul class="pesta" id="pesta">
     <li><a href="#tab1" id="tabs"><span>Perfil</span></a></li>
     <li><a href="#tab2" id="tabs"><span>Trabajos</span></a></li>
     <li><a href="#tab3" id="tabs"><span>Contacto</span></a></li>
 </ul>
</div>

и после добавляют класс "fixed" и "pesta", что это содержат только:

.pesta{
    margin-bottom: 10px;
}

ul.pesta {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

ul.pesta li {
    width: 12%;
    text-align: center;
}

ul.pesta li a {
    color: #2C3E50;
    font-weight: normal;
    display: block;
    padding: 10px 0;    
}

.fixed{
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    transition: all .5s;
}

.hoja {
    width: 70%;
    display: flex;
    margin: 20px;
    flex-wrap: wrap;
}

Включив ее остается все хорошо, только, что сейчас вытекает из контента и вмещают 100 % viewport костлявая width 100 % и следовательно кнопки уходят до конца.

Это язык сценариев JavaScript, который я использую:

 var pesta = document.getElementById('pesta');
 var altura = pesta.offsetTop;

 window.addEventListener('scroll', function(){
    if(window.pageYOffset > altura){
        pesta.classList.add('fixed');
    }else{
        pesta.classList.remove('fixed');
    }
 });

И здесь я оставляю demo, где возможно видеть проблему:

var pesta = document.getElementById('pesta');
var altura = pesta.offsetTop;

window.addEventListener('scroll', function() {
  if (window.pageYOffset > altura) {
    pesta.classList.add('fixed');
  } else {
    pesta.classList.remove('fixed');
  }
});
body {
  background:#ccc;
}

.pesta {
  margin-bottom: 10px;
}

ul.pesta {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

ul.pesta li {
  width: 12%;
  text-align: center;
}

ul.pesta li a {
  color: #2C3E50;
  font-weight: normal;
  display: block;
  padding: 10px 0;
}

.fixed {
  position: fixed;
  top: 0;
  right: 0;
  background: #fff;
  transition: all .5s;
}

.hoja {
  width: 70%;
  display: flex;
  margin: 20px;
  flex-wrap: wrap;
}

p {
  margin-bottom:400px;
}
<div class="hoja">
  <ul class="pesta" id="pesta">
    <li><a href="#tab1" id="tabs"><span>Perfil</span></a></li>
    <li><a href="#tab2" id="tabs"><span>Trabajos</span></a></li>
    <li><a href="#tab3" id="tabs"><span>Contacto</span></a></li>
  </ul>
</div>

<p>.</p>
<p>.</p>
<p>.</p>
3
задан 26.06.2017, 05:10
2 ответа

Из-за qué бьет козырем

Проблема, которая у тебя есть, - что, когда кладется какая-то стоимость позиции (p.e. absolute или fixed) элемент достается из нормальной разгрузки pÃ: gina и Ваш posici¦n может не зависеть от Ваших предков.

В твоем случае, estÃ: s используя position: fixed для класса .fixed. Перед añadir класс, у ul.pesta есть ширина 100 %, который применяется на 70 %, у которого есть .hoja; это способствует тому, чтобы у действительно ul.pesta была ширина 70 %. Но поместив ему класс .fixed, этот элемент достается вне разгрузки и 70 % уже не применяются к нему, из-за которого ocuparÃ: 100 % окна.

C¦mo podr¦, - когда

будьте решен Идеально, podr¦-схвати использовать позицию sticky вместо fixed, этого har¦, - которому элемент будет вести себя "нормальным" способом пока estÃ: в окне, но он будет вести себя как fixed, сделав scroll и оставшись вне вида (но так, что отец это не достает из разгрузки, всегда содержавшей внутри элемента).

Таким образом, уже не надо иметь ningún язык сценариев JavaScript, чтобы контролировать scroll (по крайней мере не для ul.pesta) ни añadir/quitar класс .fixed. Которое simplificar¦ - в c¦digo немного и ver¦ - в as¦-:

body {
  background:#ccc;
}

.pesta {
  margin-bottom: 10px;
}

ul.pesta {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  position: sticky;
  top: 0;
  left: 0;
  background: #fff;
  transition: all .5s;
}

ul.pesta li {
  width: 12%;
  text-align: center;
}

ul.pesta li a {
  color: #2C3E50;
  font-weight: normal;
  display: block;
  padding: 10px 0;
}

.hoja {
  width: 70%;
  display: flex;
  margin: 20px;
  flex-wrap: wrap;
}

p {
  margin-bottom:400px;
}
<div class="hoja">
  <ul class="pesta" id="pesta">
    <li><a href="#tab1" id="tabs"><span>Perfil</span></a></li>
    <li><a href="#tab2" id="tabs"><span>Trabajos</span></a></li>
    <li><a href="#tab3" id="tabs"><span>Contacto</span></a></li>
  </ul>
  <p>.</p>
  <p>.</p>
  <p>.</p>
</div>

К сожалению, sticky не estÃ: просторно вынесенный в d¦ - в сегодня и оно не будет функционировать во многих браузерах. Из-за которого tendr¦-эксперт, который должен искать альтернативу.

то, что podr¦-схвати делать, состоит в том, чтобы определять .fixed для особенного случая ul.pesta (с селектором ul.pesta.fixed) и способствовать тому, чтобы у него была ширина 70 % пробуя имитировать стоимость, что tendr¦ - во внутри .hoja (что-то, что иногда может не быть так fÃ: cil, поскольку он звучит).

Приблизительный versi¦n:

var pesta = document.getElementById('pesta');
var altura = pesta.offsetTop;

window.addEventListener('scroll', function() {
  if (window.pageYOffset > altura) {
    pesta.classList.add('fixed');
  } else {
    pesta.classList.remove('fixed');
  }
});
body {
  background: #ccc;
  margin:0;
}

.pesta {
  margin-bottom: 10px;
}

ul.pesta {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

ul.pesta li {
  width: 12%;
  text-align: center;
}

ul.pesta li a {
  color: #2C3E50;
  font-weight: normal;
  display: block;
  padding: 10px 0;
}

.fixed {
  position: fixed;
  top: 0;
  right:0;
  background: #fff;
  transition: all .5s;
}

ul.pesta.fixed {
  right: auto;
  left: 20px;
  width:70%;
  margin: 0;
  padding: 0;
}

.hoja {
  width: 70%;
  display: flex;
  margin: 20px;
  flex-wrap: wrap;
}

p {
  margin-bottom: 400px;
}
<div class="hoja">
  <ul class="pesta" id="pesta">
    <li><a href="#tab1" id="tabs"><span>Perfil</span></a></li>
    <li><a href="#tab2" id="tabs"><span>Trabajos</span></a></li>
    <li><a href="#tab3" id="tabs"><span>Contacto</span></a></li>
  </ul>
  <p>.</p>
  <p>.</p>
  <p>.</p>
</div>
2
ответ дан 24.11.2019, 07:59
  • 1
    Muchí пропасти спасибо. :P – Julio C. Barajas 26.06.2017, 23:43
  • 2
    @Mariano правильный. Я не захотел снять часть, что añ adí в / он снимал класс .fixed, если он использовался в другом сайте (и потому что hací в который он изменит фон). Но я верю в то, что sí я буду снимать это для того, чтобы не было confusió n – Alvaro Montoro♦ 27.06.2017, 18:02
  • 3
    @Mariano OK. Quité язык сценариев JavaScript и moví стили от .fixed до .pesta, ¿ có mo видят сейчас? – Alvaro Montoro♦ 27.06.2017, 18:06
  • 4
    Muchí simo má s просвет. Мне нравятся ответы, которые упрощают проблемы ;-) – Mariano 27.06.2017, 18:07

Я изменил немного HTML, помещая ul в контейнер и верного CSS, не используя

var pesta = document.getElementById('pesta');
 var altura = pesta.offsetTop;

 window.addEventListener('scroll', function(){
    if(window.pageYOffset > altura){
        pesta.classList.add('fixed');
    }else{
        pesta.classList.remove('fixed');
    }
 });
.fluid-container{
  width:100%;
}
.pesta{
    margin-bottom: 10px;
}

ul.pesta {
    width: 100%;
    max-width:900px;
    margin:auto;
    border:0px solid red;
    padding:0;
}

ul.pesta li {
    width: 33%;
    text-align: center;
    list-style:none;
    display:inline-block;
    margin:0;
    padding:0;
}

ul.pesta li a {
    color: #2C3E50;
    font-weight: normal;
    display: block;
    padding: 10px 0;    
}

.fixed{
    position: fixed;
    top: 0;
    right: 0;
    background: #fff;
    transition: all .5s;
}

.hoja {
    width: 100%;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
<div class="hoja">
<div class="fluid-container" id="pesta">
  <ul class="pesta">
       <li><a href="#tab1" id="tabs"><span>Perfil</span></a></li>
       <li><a href="#tab2" id="tabs"><span>Trabajos</span></a></li>
       <li><a href="#tab3" id="tabs"><span>Contacto</span></a></li>
   </ul>
</div>

</div>


<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</p>

sticky Надеюсь, что он стоит тебе этот versi¦n

0
ответ дан 24.11.2019, 07:59