Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

Question

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

One issue I encountered was that the buttons weren't scrolling me to the top of the anchor, instead scrolling too far into the section due to the fixed navbar overlapping.

I tried solving it with margins and paddings but believe there must be a simpler solution out there. Check out my attempt here

I spent hours experimenting but couldn't find an ideal fix, something always seemed off or didn't work as intended.

$(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 && 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,900&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 -->

javascript html jquery css anchor

Answer 1

Answer №1

To enhance the appearance of all anchor tags, you can apply a class that includes a pseudo-element with specific attributes:

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

Adjust the values such as 80px and -80px according to the height of your fixed header. This will create pseudo elements that match the height of the header and appear behind it, aligning with the main elements below the header.

UPDATE after reviewing your Fiddle:

It appears that the scrolling behavior is animated rather than direct jumping to anchors. Therefore, some modifications need to be made in the scrolling script to accommodate this behavior.

A small adjustment is made in the Javascript code (at the end of the HTML code): I included " - 80 " in the animate function to offset the scroll animation by 80px. Please note that no offset is added if the anchor link is #home, as the page should scroll to the top without any offset:

<!-- 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 End -->

This adjustment resolves the issue. You can view the updated version of your fiddle with this modification only: https://jsfiddle.net/c1gjybtf/

Answer 2

To enhance the appearance of all anchor tags, you can apply a class that includes a pseudo-element with specific attributes:

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

Adjust the values such as 80px and -80px according to the height of your fixed header. This will create pseudo elements that match the height of the header and appear behind it, aligning with the main elements below the header.

UPDATE after reviewing your Fiddle:

It appears that the scrolling behavior is animated rather than direct jumping to anchors. Therefore, some modifications need to be made in the scrolling script to accommodate this behavior.

A small adjustment is made in the Javascript code (at the end of the HTML code): I included " - 80 " in the animate function to offset the scroll animation by 80px. Please note that no offset is added if the anchor link is #home, as the page should scroll to the top without any offset:

<!-- 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 End -->

This adjustment resolves the issue. You can view the updated version of your fiddle with this modification only: https://jsfiddle.net/c1gjybtf/

Answer 3

Answer №2

After some adjustments,

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

I also modified the top: to -80px for each section (as my navbar is 80px tall)

This resulted in a cleaner look

Answer 4

After some adjustments,

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

I also modified the top: to -80px for each section (as my navbar is 80px tall)

This resulted in a cleaner look

Is there any method to avoid the hassle of constantly adjusting margins and paddings on my one-page website?

Answer №1

Answer №2

Similar questions

Executing a file upload using ng-click="upload('files')" within Selenium Webdriver

I'm looking for help on creating a three-column table using javascript/jquery. The table should display Product, Price, and Discount (which is calculated at 20%). Can anyone

What is the best way to update a canvas chart when the side menu is hidden?

The Google Maps JavaScript API is displaying a map of China instead of the intended location

Tips on invoking a Stencil component function or method from beyond the Vue instance

String containing the character '+' was received when performing an Ajax post and appending the string to FormData in c#

Opacity problem when hovering on Chrome

Issue with inconsistent error handling in Mui DateTimePicker and react-hook-form

Create a CSS border that resembles the one used in Google's signup form

Setting nodeIntegration to false led to an Uncaught ReferenceError: require is not defined when trying to access Object.url (external "url":1) in the electron-react-typescript environment

Uncover comprehensive error analysis via AJAX communication

Tips for replacing the nested array object in JavaScript

Maintain the state of the toggle div after page refresh or modification

Retrieve the heading from a pop-up box

Unable to retrieve field values from Firestore if they are numeric rather than strings

Adjust the position of the div so that it remains visible as you scroll

The Challenge of Logging in with the Loopback Angular SDK

Using inline SVG within a Vue.js component

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal

Tips for avoiding duplicate usernames in mySQL when working with PHP