What is the best way to toggle the visibility of my menu using JavaScript?

Question

What is the best way to toggle the visibility of my menu using JavaScript?

I recently implemented a script to modify a CSS property in my nav bar as I scroll down, triggering the change after reaching 100px.

 $(window).scroll(function() {    
        var scroll = $(window).scrollTop();
         //console.log(scroll);
        if (scroll >= 100) {
            //console.log('a');
            $(".header").addClass("change");
        } else {
            //console.log('a');
            $(".header").removeClass("change");
        }
    });

Is there a way for me to hide the navigation bar when scrolling reaches 1000px and then display it again after passing that point (1500px)?

javascript html css

Answer 1

Answer №1

Do you need this task completed? https://jsfiddle.net/znw67k79/3/

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
  if (scrollTop == 1000){
    $('nav').fadeOut('slow');
  }
  if (scrollTop == 1500){
        $('nav').fadeIn('slow');
  }
})

Answer 2

Do you need this task completed? https://jsfiddle.net/znw67k79/3/

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
  if (scrollTop == 1000){
    $('nav').fadeOut('slow');
  }
  if (scrollTop == 1500){
        $('nav').fadeIn('slow');
  }
})

Answer 3

Answer №2

Here is a potential solution that may suit your needs. Take a moment to evaluate it.

if (scroll >= 1000 && scroll <= 1500) {
  // Commented out console.log
  $(".header").hide();
} else {
  // Commented out another console.log
  $(".header").show();
}

Answer 4

Here is a potential solution that may suit your needs. Take a moment to evaluate it.

if (scroll >= 1000 && scroll <= 1500) {
  // Commented out console.log
  $(".header").hide();
} else {
  // Commented out another console.log
  $(".header").show();
}

Answer 5

Answer №3

One method for managing scroll behavior is to delay invoking the handler to prevent unnecessary intermediate calls while scrolling:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Toggle menu visibility with JavaScript</title>
    <style type="text/css">
        .header
        {
            min-height: 50px;
            position: fixed;
        }

        .header li {
            float: left;
            list-style: outside none none;
            margin-right: 10px;
        }

        .content {
            height: 10000px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).bind('scroll', function (e) {
                clearTimeout(this.scrollTimeout);
                this.scrollTimeout = setTimeout(function () {
                    var currentTop = $(e.target).scrollTop();
                    console.log(currentTop);
                    $('.header').toggle(currentTop < 1000 || currentTop > 1500);
                }, 500);
            });
        });
    </script>
</head>
<body>
    <div class="header">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </div>
    <div class="content">

    </div>
</body>
</html>

Answer 6

One method for managing scroll behavior is to delay invoking the handler to prevent unnecessary intermediate calls while scrolling:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Toggle menu visibility with JavaScript</title>
    <style type="text/css">
        .header
        {
            min-height: 50px;
            position: fixed;
        }

        .header li {
            float: left;
            list-style: outside none none;
            margin-right: 10px;
        }

        .content {
            height: 10000px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(document).bind('scroll', function (e) {
                clearTimeout(this.scrollTimeout);
                this.scrollTimeout = setTimeout(function () {
                    var currentTop = $(e.target).scrollTop();
                    console.log(currentTop);
                    $('.header').toggle(currentTop < 1000 || currentTop > 1500);
                }, 500);
            });
        });
    </script>
</head>
<body>
    <div class="header">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
            <li>Item 6</li>
            <li>Item 7</li>
            <li>Item 8</li>
            <li>Item 9</li>
        </ul>
    </div>
    <div class="content">

    </div>
</body>
</html>

What is the best way to toggle the visibility of my menu using JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

The issue with viewing next/image properly only occurs on desktops using a responsive layout. I would like for the image

The versatile aspect of my discord bot is its ability to function with various

Verify that the string does not have any repeating characters

The object in three.js disappears from the scene but remains visible

Restoring text boxes to their original styling

Develop a sophisticated multi-page application using create-react-app in conjunction with express.js

Dealing with a div height problem in HTML/CSS

Mastering the art of grouping by a key and generating sub-objects from a plain array of key-value pairs in JavaScript ES5 without relying on third-party libraries

Tips for designating all content within a <div> element to open in a blank target (target="_blank")

Using Puppeteer to Retrieve a List of Items with Identical Selectors

Sign-in options displayed in a drop-down menu

Delete elements from a dynamic list

Allowing Users to Easily Copy CSS ::before Content

Utilize HTML5 Application Cache solely for storing and managing dependencies

As the text in the textarea grows, the dimensions of the div containing it will

Modifying the HTML content of a span element does not always initialize all of its properties

What could be causing the background color not to change on the HTML page with Bootstrap?

Online application for saving a vast quantity of information on the user's device

Vue encounters an issue when trying to access a specific field within an array of objects

Ways to trigger a JavaScript function upon submission of my form