Fixed menubar is being used to display section headings

Despite my usual avoidance of CSS, this time I had to work with it and ran into a peculiar issue. Whenever I click on the menu in the header, the titles of the sections start going behind the menu.

If anyone can help, here is the code snippet: http://jsfiddle.net/cu0520mL/

Below is the JavaScript code being used:


$(document).ready(function(){
    scrollEvent();
    $(".menu >ul >li").click(function(){
        $(window).scrollTop($(window).scrollTop() + 60);
    });
    $('.more-blogs > ul').find('li').click(function(){
        $(this).toggleClass('show-blog-lists');
    });
});

function scrollEvent(){
    $(window).bind('scroll', function(e) {
        e.preventDefault();
        var navHeight = $( window ).height() - 70;
        if ($(window).scrollTop() > navHeight) {
            $('.menu').addClass('fixed');
        } else {
            $('.menu').removeClass('fixed');
        }
    });
}

Answer №1

Feel free to test this solution and adjust it to fit your specific needs http://jsfiddle.net/sbuppkth/

.menu.sticky {
 position: fixed;
 bottom: 0;
 width: 100%;
}

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

What strategies can be implemented to decrease the value of the writing box by 2.5%?

I would like to decrease the value in the input box by 2.5%. Here is the HTML code snippet: <div class="ZakatCalc"> <div class="calcimg"> <img src="" alt="" srcset="" class=" ...

Using AJAX to retrieve a specific JSON object from an array of JSON data

Data retrieved in JSON array from the API: [{"id":"001", "name":"john", "age":"40"}, {"id":"002", "name":"jane", "age":"30"}] Using Ajax: $.ajax({ url: 'interface_API.php', ...

Updating CSS stylesheets dynamically when onchange event occurs

I am currently able to dynamically change style rules using JS, but I feel that this is limiting. I would prefer to be able to swap entire CSS stylesheet files easily. Do you have any suggestions on how to accomplish this? Here is my code: <label>T ...

Ensure the vertical alignment of the error tooltip remains consistent regardless of the length of its content

I have been working on an error tooltip that appears when the user hovers over an input field. The tooltip is almost finished, but I am having trouble aligning it vertically with the input field. I have tried multiple solutions without success. Check it o ...

Close the Bootstrap burger menu after clicking on a scrollspy link

Is there a way to automatically collapse the Bootstrap burger menu when clicking on a scrollspy link? While browsing my website on a mobile device, the Bootstrap navigation menu switches to a burger icon. However, when you click on an internal link that l ...

Is it possible to incorporate MUI React components within an iframe?

Looking to replicate the style seen in this Material UI website screenshot, I aim to design a container that will encompass my iframe contents, such as the navBar and menu drawer. However, I want to utilize Material UI's components for these elements. ...

Retrieving Text Between HTML Tags Using jQuery

Disclosure: I am fully aware of the messy HTML code in this legacy application. Unfortunately, due to its extensive dependencies, making any changes to the HTML structure is not feasible. Despite the circumstances, here is the code snippet at hand: <t ...

What is causing it to give me 'undefined' as the result?

Trying to execute a script, test.al(); and within test.al, it calls getcrypt.php();. The php script is hosted on a webserver, and it is functioning properly. Here are the current scripts being used: JS var getcrypt = { php: function () { $.a ...

Does the downloading of images get affected when the CSS file has the disabled attribute?

Is it possible to delay the download of images on a website by setting the stylesheet to 'disabled'? For example: <link id="imagesCSS" rel="stylesheet" type="text/css" href="images.css" disabled> My idea is to enable the link later to tri ...

Is it possible to simultaneously toggle buttons and submit a form?

I am currently working on a functionality that involves toggling the display of two buttons and submitting a form. Code toggleButtons() { var btn1 = document.getElementById("start"); var btn2 = document.getElementById("pause"); if (btn1.style. ...

Is there a problem with using p:first-child when there is an img tag right after the p tag?

Greetings, I am having trouble getting this to work properly: .body-post p:first-child:first-letter { font-size:240%; } and here is the HTML code: <div class="body-post"> <p><img src="http://#" align="left" style=" ...

What is the best way to integrate a vh property instead of px for a scrolling navigation using jQuery?

I want to achieve a navigation bar that fades in after scrolling 100% of the viewport height, but all examples I find use a pixel value instead of viewport height. Is there a way to convert window height into jQuery to make this work? Thank you in advance ...

default browser's drag and reposition feature

I'm trying to make an image draggable on my webpage by using default browser behavior, but it's not working for some reason. Here is the code snippet I'm using: <div style="position:relative;width:1000px; height:900px;border:solid;z-inde ...

Leveraging ruby/watir/page_object for testing a jQuery UI autocomplete feature (AJAX)

Currently, I am utilizing a combination of jRuby, watir-webdriver, and Page Object for conducting tests on a web application. Within the application, there exists a jquery autocomplete widget that yields responses from the backend database following an un ...

PHP code containing an if/else statement that performs form validation and validates the entered date of birth

Currently, I am practicing my PHP skills with if and else statements as well as form validation. The main concept I am working on involves the following: Upon entering a name, Date of Birth (DOB), and email, and then clicking the submit button, the action ...

Menu is not functioning properly as it is not staying fixed in place

I am trying to create a fixed menu that sticks to the browser window as it scrolls. However, I am encountering an issue where the transition from sticky to fixed is not smooth when I remove position: relative; from navbar__box. window.onscroll = functio ...

How to retrieve the value of a selected item in primeng using p-dropdown and angular

Encountering an issue when trying to send the selected item value while iterating over an array of strings like: "BMW", "FERRARI", "AUDI", "BENTLY" Here is the structure of my HTML: <p-dropdown optionLabel="type" [options]="cars" formControlName="name" ...

React Native Bug: Border Radius Issue at the Bottom

I'm struggling with adding a border on the bottom and left sides. Even though I've specified the properties, the border is covering the circle instead of surrounding it. <View style={{ borderBottomColor:'red', borderBotto ...

Discover the steps to incorporating events that enable page transitions for a dynamically generated listview using jQuery Mobile

By utilizing the following code snippet, I successfully inserted data into the listview: var renderItemElement = function(item) { return $.tmpl("<li><a>${text}</a></li>", item) .data("item", item) .insertAfter( ...

The PHP JSON response is equipped with HTML headers

I'm facing an unusual issue with my PHP code. I'm trying to build a PHP page that sends JSON data back in response to a Jquery AJAX call. However, despite setting the content type as application/json, the response always contains the HTML header. ...