Tips for creating a margin in a section that disappears when a fixed header is clicked on tab

I've been searching extensively for solutions, but none of them have been effective for me. I am new to developing.

I currently have a fixed header that stays in place even when scrolling.

How can I achieve the functionality where sections disappear after clicking on tabs in the sidebar?

Current Result:

https://i.sstatic.net/3Ip2g.jpg

Desired Result:

https://i.sstatic.net/KaIXA.jpg

Is there a way to implement this using Java, CSS, or any other method?

*{ 
          margin: 0px;
      }

      #sidebar {
        position: fixed; 
        height: 100%;
        width: 10%;
        margin: 0px;  
        background: lightblue; 
        border-radius: 7px;  
      }
      
      {/* More CSS code */}
      

            {/* HTML content */}

javascripthtmlcss

Answer №1

To implement this functionality, JavaScript is utilized. The code has been customized by adding data-href attributes instead of href to prevent interference with the Scroll feature in JavaScript. Detailed comments have been included within the JavaScript code block to explain the modifications that have been made.

let tabs = document.querySelectorAll(".codehim-menu li a");

tabs.forEach((tab) => {
  tab.onclick = function() {
    let el = document.querySelector(tab.dataset.href).offsetTop;
    let pos = el - document.querySelector("header").offsetHeight - 25;
    window.scrollTo(0, pos);
  }
})
* {
  margin: 0px;
}

#sidebar {
  position: fixed;
  height: 100%;
  width: 10%;
  margin: 0px;
  background: lightblue;
  border-radius: 7px;
}

#rightSideWrapper {
  width: 90%;
  float: right;
  background: black;
}

header {
  position: fixed;
  width: 100%;
  padding: 15px;
  text-align: center;
  background: #d8b39d;
  border-radius: 7px;
}

section {
  height: 200px;
  order: 2;
  flex: 0 1 100%;
  text-align: center;
  font-size: 31px;
  font-weight: 900;
}

section,
footer {
  background: lightgray;
  border-radius: 7px;
  margin: 5px;
  padding: 20px;
}

footer {
  height: 20px;
  order: 3;
  flex: 0 1 100%;
  text-align: center;
  background: #d297c0;
}

/* Remaining CSS code for side menu styling */


<div id="menu-code">
  <input type="checkbox" name="checkbox" id="menu-trigger" class="trigger">
  <label for="menu-trigger">
    <div class="codehim-menu-trigger"></div>
    </label>
  <nav>
    <ul class="codehim-menu">
      <li> <a data-href="#A">Tabs A</a></li>
        ...
      <li> <a data-href="#L">Tabs L</a></li>
    </ul>
  </nav>
</div>

<!-- Content sections with corresponding IDs -->

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Check for the presence of a certain value within an array and see if it corresponds to

array = ['data', 'category', 'hour']; object = { "status": { "type": "INFO", "messages": [] }, "data": { " ...

javascriptarraysobjectfilter

Issue with showing error messages in view when using ejs templates

I am a beginner with node.js and I'm struggling to show error messages in the view using ejs templates. I want to display This user already exists. Here is my code: node.js router.post('/signup', (req, res) => { var username = req. ...

javascriptmysqlnode.jsejsregistration

Obtaining the Current Component Instance in SolidJS

Is it possible to retrieve the Component that is currently active in SolidJS, along with its props, signals, internal state, effects, etc.? I'm searching for a solution similar to React's __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCu ...

javascripttypescriptsolid-js

Enclose all similar elements in a container with a flexible layout

I'm working on a flexible layout in Wordpress using Advanced Custom Fields. I need to wrap images with the class name portrait in a containing div, but only in pairs and in the same position in the dom. The challenge is that these elements can appear ...

jqueryhtmlwordpressadvanced-custom-fieldswrapall

Transfer data to clipboard

Is there a way to copy information via href to the clipboard? I'm looking to achieve something like this; <?php print "Number: <a href=\"" . $number . ">" . $number . "</a>"; ?> When someone clicks the link, the information ...

javascriptphpjqueryhtmlcss

Three.js: Modifying values within dat.GUI is not allowed

I have added a "comboBox" to my dat.GUI instance in order to select possible values. However, when I run my application, the dat.GUI appears with the comboBox but it seems to be frozen - I cannot change its default value. Below is the code snippet that dem ...

javascriptthree.jsdat.gui

Refreshing a Particular JavaScript File in Electron Upon Request

Lately, I've been working on an Electron app that involves storing data in a javascript file. The data needs to be decrypted when the user logs in and displayed, then encrypted again when the user logs out. While logged in, users can add new data to t ...

javascriptnode.jselectronreload

Having troubles with the xml2json jQuery plugin's functionality?

I've implemented the jQuery XML to JSON Plugin by Fyneworks.com. Any idea why my code isn't functioning as expected? index.html <!DOCTYPE html> <html> <head> <script src="build/jquery.xml2json.js"></script> <sc ...

javascriptjavajqueryjsonxml

Patience is key as we wait for the webpage to finish loading

I've been searching for a solution to this issue for quite some time without any success... On my webpage, I have a square texture as the background which is set to repeat in order to fill the entire page. However, when a user first enters my site, t ...

javascriptphp

The functionality of the disabled button is malfunctioning in the Angular 6 framework

Just starting out with angular 6 and I'm using formControl instead of FormGroup for business reasons. app.component.html <button class="col-sm-12" [disabled]="comittee_Member_Name.invalid && comittee_Member_Number.invalid && c ...

htmlangulartypescriptangular6

What is the best way to remove a logo from a wordpress website?

I've come across a theme that I find quite appealing, but the "designed by" logo is positioned in a rather bothersome place - right in the center of the page on the left side. Is there a way for me to remove it from there and relocate it to the footer ...

phphtmlwordpress

Experiencing difficulties with positioning text beside an image

Hello everyone, I'm a first-time poster seeking some assistance. I'm currently tackling an assessment and am struggling with the final part. The task involves creating a picture card with an image at the top, a circular image to the side, and tex ...

htmlcssflexboxcss-grid

Issues with Django Site Search Functionality

Currently working on a Django project, I have encountered an issue with the search bar on my localhost site. Despite adding the search bar, it fails to return any results when provided input. Upon inspecting the page source, I discovered some unfamiliar li ...

javascriptpythonajaxdjangodjango-urls

Combine functions from two objects that share the same properties into an array for each property

I need help combining the methods from two objects into one, resulting in an array of methods for each property in the parent object: obj1 = {"prop1":"method1","prop2":"method2"} obj2 = {"prop1":"method3","prop2":"method4"} Expected result: obj1 = {"pro ...

javascriptjqueryarraysjson

Graphing functions with three.js

Is it possible to create a function grapher using the three.js API to plot a function in the form of z=f(x,y)? The program should: Generate input values between -1 and 1 in increments of .1, and use these values to plot x, y, and z vertices as part of a ...

javascripthtmlcssthree.js

Attempting to replicate my console.log outputs

I have a variable that contains 4 objects which I can view when logging it out in the console. However, I am struggling to create the desired structure for this return variable (I want to sort it but need to first recreate the structure). When I check the ...

javascriptarraysobjecttypescript

Choose All Checkbox Button

Issue with select button not working as expected - it needs to be clicked once on the selected button, then clicking another button will display the output. How can the output be shown with just one click? The main code for the button is function checkAll. ...

javascripthtmlforms

Personalizing data structure fields in sanity.io

In the Sanity Studio schema, I created an object type with one field that is dependent on another. If the "all" field is checked true, then the "date" field should be hidden or disabled. However, I am unsure of how to implement this. I have searched for e ...

javascriptjsonsanity

Validating Date and Time in Angular 6 using ngIf within an HTML template

I am currently utilizing Angular6. Displayed below is the ngfor with a div. The API provides the meeting date and time along with the status, which is usually listed as upcoming. For example, if the date is 09/18/2018 and the time is 5.30 PM. <div cl ...

htmltypescriptangular6

Assign a class to each offspring of a slot

I am currently in the process of setting up a component with a slot that, upon rendering, adds a specific class to each child within that slot. To simplify: <template> <div> <slot name="footerItems"></slot> </div> ...

javascriptvue.js