Есть ли способ, при котором мне не нужно точно настраивать поля и отступы на моем onepager?

ProgramBox

Есть ли способ, при котором мне не нужно точно настраивать поля и отступы на моем onepager?

Post author:admin
Запись опубликована:28 февраля, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #css #anchor

#javascript #HTML #jquery #css #привязка

Вопрос:

У меня была проблема, когда кнопки не прокручивали меня до верхней части привязки, а вместо этого прокручивали слишком далеко в раздел (это было потому, что моя панель навигации исправлена и перекрывает раздел).

Я исправил это с помощью полей и отступов, но я чувствую, что есть гораздо лучшее и более простое решение. https://jsfiddle.net/HcJanni/2n9b0ohp/76 /

Я экспериментировал несколько часов, но не мог найти идеального решения, всегда было что-то не так и не работает.

 $(function() {
  var shrinkHeader = 100;
  $(window).scroll(function() {
    var scroll = getCurrentScroll();
    if (scroll >= shrinkHeader) {
      $('#navbar').addClass('shrink');
    } else {
      $('#navbar').removeClass('shrink');
    }
  });

  function getCurrentScroll() {
    return window.pageYOffset || document.documentElement.scrollTop;
  }
});
// JavaScript Document

$(document).ready(function() {

  var navTop = $('#navbar').offset().top;
  var navHeight = $('#navbar').height();
  var windowH = $(window).height();

  $('.section').height(windowH);

  $(document).scroll(function() {
    var st = $(this).scrollTop();

    //for the nav bar:
    if (st > navTop) {
      $('#navbar').addClass('fix');
      $('.section:eq(0)').css({
        'margin-top': navHeight
      }); //fix  scrolling issue due to the fix nav bar
    } else {
      $('#navbar').removeClass('fix');
      $('.section:eq(0)').css({
        'margin-top': '0'
      });
    }

    $('.section').each(function(index, element) {
      if (st   navHeight > $(this).offset().top amp;amp; st   navHeight <= $(this).offset().top   $(this).height()) {
        $(this).addClass('active');

        var id = $(this).attr('id');
        $('a[href="#'   id   '"]').parent('li').addClass('active');
        // or $('#nav li:eq(' index ')').addClass('active');
      } else {
        $(this).removeClass('active');

        var id = $(this).attr('id');
        $('a[href="#'   id   '"]').parent('li').removeClass('active');
        //or $('#nav li:eq(' index ')').removeClass('active');
      }

    });

  });

});



//

 /* MAIN */

/* SECTION HOME */
#home {
  height: 853px !important;
  display: flex;
  z-index: -1;
  position: relative;
  top: -128px;
  padding-top: 128px;
}

#homebild {
  width: 1280px;
  height: 853px;
}

/* SECTION WIR-UEBER-UNS */
#wir-ueber-uns {
  height: 853px !important;
  display: flex;
  top: -208px;
  padding-top: 80px;
  z-index: -2;
  position: relative;
  background-color: lightblue;
}

#wir-ueber-unsbild {
  width: 1280px;
  height: 853px;
}

/* SECTION AKTIONEN */
#aktionen {
  height: 853px !important;
  display: flex;
  padding-top: 80px;
  top: -288px;
  z-index: -3;
  position: relative;
  background-color: darkblue;
}

#aktionenbild {
  width: 1280px;
  height: 853px;
}

/* SECTION TERMINVEREINBARUNG */
#terminvereinbarung {
  height: 853px !important;
  padding-top: 80px;
  top: -368px;
  display: flex;
  z-index: -4;
  position: relative;
  background-color: red;
}

#terminvereinbarungbild {
  width: 1280px;
  height: 853px;
}

/* SECTION INFOS */
#infos {
  height: 772px !important;
  width: 1280px;
  display: flex;
  padding-top: 80px;
  top: -448px;
  z-index: -5;
  position: relative;
  background-color: darkblue;
}

/* MAIN ENDE */

 <!DOCTYPE html>
<html>

  <head>
    <title>OptikTack</title>
    <link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900amp;display=swap" rel="stylesheet">
  </head>

  <body>
    <div id="container">
      <div class="body">
        <!-- NAVIGATION -->
        <nav id="navbar">
          <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
          <script src="javascript/navbar fixed.js"></script>
          <a href="#home" id="logo"><img src="https://i.postimg.cc/przxCGcx/Logo.png" class="logo"></a>
          <ul>
            <li class="hvr-sweep-to-top active"><a href="#home">Home</a></li>
            <li class="hvr-sweep-to-top"><a href="#wir-ueber-uns">Wir über uns</a></li>
            <li class="hvr-sweep-to-top"><a href="#aktionen">Aktionen</a></li>
            <li class="hvr-sweep-to-top"><a href="#terminvereinbarung">Terminvereinbarung</a></li>
            <li class="hvr-sweep-to-top"><a href="#infos">Infos</a></li>
          </ul>
        </nav>
        <!-- NAVIGATION ENDE -->
        <!-- MAIN -->
        <div id="spacer"></div>
        <!-- home section -->
        <section id="home" class="section">
          <div>
            <img src="https://i.postimg.cc/tgk5cWmx/Bild-1.jpg" alt="Frau" id="homebild" width="1280px">
          </div>
        </section>
        <!-- home section ende -->
        <!-- wir-ueber-uns section -->
        <section id="wir-ueber-uns" class="section">
          <div>
            <img src="https://i.postimg.cc/FH6RSxbF/Bild-2.jpg" width="1280px" id="wir-ueber-unsbild">
          </div>
        </section>
        <!-- wir-ueber-uns section ende -->
        <!-- aktionen section -->
        <div id="reference"></div>
        <section id="aktionen" class="section">
          <div>
            <img src="https://i.postimg.cc/k5P0L6qF/Bild-5.jpg" width="1280px" id="aktionenbild">
          </div>
        </section>
        <!-- aktionen section ende -->
        <!-- terminvereinbarung section -->
        <section id="terminvereinbarung" class="section">
          <div>
            <img src="https://i.postimg.cc/6q8b8tBp/Bild-9.jpg" width="1280px" id="terminverinbarungbild">
          </div>
        </section>
        <!-- terminvereinbarung section ende -->
        <!-- infos section -->
        <section id="infos" class="section">
          <div>
            <p>section 5</p>
          </div>
        </section>
        <!-- infos section ende -->
        <!-- MAIN ENDE -->

Ответ №1:

Вы можете добавить класс ко всем этим якорям, который добавляет к ним псевдоэлемент со следующими настройками:

 .your_anchor_class::before { 
  display: block; 
  content: " "; 
  margin-top: -80px; 
  height: 80px; 
  visibility: hidden; 
  pointer-events: none;
}

Значения 80px и -80px должны быть скорректированы в соответствии с высотой вашего фиксированного заголовка, но это создаст псевдоэлементы, которые достигают высоты заголовка, а затем будут находиться за заголовком, выравнивая их соответствующие «основные» элементы под заголовком.

ДОБАВЛЕНИЕ / РЕДАКТИРОВАНИЕ после просмотра вашей скрипки (отредактировано еще раз после комментария):

Я раньше не знал, что вы не «переходите» к позициям привязки напрямую, но есть анимированный скрипт прокрутки, который прокручивается до этих привязок, который должен обрабатываться по-другому, т. Е. Путем изменения сценария.

Итак, я изменил только одну маленькую вещь в вашем Javascript (внизу HTML-кода): Я добавил » — 80″ к animate функции, которая добавляет (или, скорее, вычитает) смещение в 80 пикселей к позиции, которую прокручивает анимация скрипта. (единственное исключение: если привязка ссылки есть #home , смещения нет, поскольку в этом случае страница должна прокручиваться до конца, для этого и нужен if / else):

 <!-- Smooth Scroll -->
<script>
  $('a').click(function() {
  var scrollziel = $(this).attr('href');
    if(scrollziel == '#home') {
      $('html, body').animate({
        scrollTop: 0
      }, 500);
      return false;
    } else {
      $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top - 80
      }, 500);
      return false;
    }
  });
</script>
<!-- Smooth Scroll Ende -->

Кажется, это исправляет проблему, см. Мою версию вашей скрипки, только с одним небольшим отличием: https://jsfiddle.net/c1gjybtf /

1. Я добавил это, но теперь между моими разделами есть пробелы, и это почему-то не сработало для Terminvereinbarung «

2. У вас все еще есть top: -80px и padding-top: 80px в ваших основных элементах (должны быть удалены)

3. Но я выделил их серым цветом с помощью /* */ Я думал, что он проигнорирует их, когда я выделю их серым цветом

4. Ах, извините, я не заметил этого раньше. Но вы таким образом прокомментировали все правила CSS для этих элементов — это, вероятно, разрушает ваш макет (?) Вы должны только прокомментировать top: -80px и padding-top: 80px для тестирования этого.

5. Пожалуйста, обратите внимание: я еще раз изменил код в вопросе и добавил еще одну скрипку.

Ответ №2:

Я добавил

   font-family: "Saira", "Roboto",  Segoe UI, Helvetica Neue, Arial, sans-serif;
  box-sizing: border-box;
}

и изменил top: значение на -80 пикселей в каждом разделе (поскольку моя панель навигации имеет высоту 80 пикселей)

Это сделало его немного более простым