Having trouble making the menu stay at the top of the page in IE7

Check out the demo here:

http://jsfiddle.net/auMd5/

I'm looking to have the blue menu bar stay fixed to the top of the page as you scroll past it, and then return to its original position when scrolling back up. This functionality works in all browsers except for IE7. Despite using jQuery to change the menu's position from relative to fixed conditionally, it doesn't seem to work in IE7.

As a workaround, I tried removing all JavaScript and setting the CSS position to fixed directly, which displays correctly in IE7.

In addition, testing with the condition 

if ($('table#menu').position().top + 10 <= $(window).scrollTop())
triggered an alert in IE7, indicating that the event is being recognized.

So, the static CSS works fine and the JavaScript condition is functional. Any thoughts on what may be causing the issue?

javascriptjquerycssinternet-explorerinternet-explorer-7

Answer №1

One trick to make it work as expected in IE 7 is to remove the DOM element, change its CSS, and then add it back to the DOM:

$(function() {

    //cache necessary objects and get initial top offset for #menu
    var $window  = $(window),
        $menu    = $('#menu'),
        menuTop  = $menu.offset().top,
        $midWrap = $('#mid-wrap');

    $window.scroll(function() {

        //cache a copy of #menu object and get its CSS position property
        var $tmp      = $menu,
            position  = $tmp.css('position'),
            windowTop = $window.scrollTop();

        $menu.remove();

        //if position is not fixed and #menu is above the fold
        if (position != 'fixed' && menuTop <= windowTop) {

            //remove current #menu element from the DOM
            $menu.remove();

            //set position property of new #menu element
            $tmp.css('position', 'fixed');

            //re-insert #menu item into the dom
            $midWrap.prepend($tmp);
            $menu = $tmp;

        //if position is not relative and #menu's offset is greater than how far user has scrolled down
        } else if (position != 'relative' && menuTop > windowTop) {

            //remove current #menu element from the DOM
            $menu.remove();

            //set position property of new #menu element
            $tmp.css('position', 'relative');

            //re-insert #menu item into the dom
            $midWrap.prepend($tmp);
            $menu = $tmp;
        }
    });
});

Check out this demo: http://jsfiddle.net/auMd5/5/

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

Javascript error in formatting

Currently, I am utilizing an inner join operation on three tables and displaying the resulting table using XML. <SQLInformation> <Table>tblechecklistprogramworkpackagexref prwpxref</Table> <TableJoins> INNER JOI ...

javascriptjqueryxml

Is it possible to store multiple keys in HTML local storage?

Is there a way to store multiple keys to local storage without overwriting the previous ones when multiple people take a survey and refresh? Could they be grouped by userID or sorted in any way? $('form').submit(function() { $('input, ...

javascriptjqueryhtmllocal-storage

Fetching data from a ColdFusion component using AJAX

Having trouble performing an SQL COUNT on my database using AJAX through a cfc file, and I can't figure out how to retrieve the return variable. Here's the relevant section of the cfc file: <cffunction name="getSpeakerCount" access="remote" r ...

javascriptjqueryajaxcoldfusion

The protection ensured by employing an extensive hash in the query string for the recognition of a changing document

I am currently developing a small web application that creates exercise program printouts. The concept is simple - a user like a personal trainer can craft an exercise regimen and send it to their client via email using a unique link. http://www.myurl ...

phpjavascriptjquerysecurity

Stunning Bootstrap 4 landing page components stacking beautifully on one another

I'm relatively new to frontend development and I'm facing a challenge in organizing a layout using Bootstrap 4. My goal is to create a banner for the landing page. I have attached an example of how I want the layout to look, please take a look. B ...

htmlcssbootstrap-4

Confusing jQuery Selector Problem

Here is an example I have What this example should do: Check if there is a .box-wrapper in the document If there is, and if there is a click event on .tabs li a Locate .selected and remove the class Find the parent of the clicked link and add the class ...

jqueryjquery-selectors

PHP data grid selects a field and dynamically generates a dropdown menu from other tables

I'm currently using phpMyDataGrid and I'm having trouble implementing a dropdown list menu in one of the columns. $objGrid = new datagrid; $objGrid->closeTags(true); $objGrid->friendlyHTML(); $objGrid->methodForm("get"); $objGr ...

phpjqueryajaxdatagridviewdatagrid

What is the best way to display and conceal elements depending on the chosen option using jQuery?

Can you help me figure out why this code isn't working as expected? <Script> $('#colorselector').change(function() { $('.colors').hide(); $('#' + $(this).val()).show(); }); </Script> < ...

jqueryhtmlhtml-select

The solution to enabling multiple inputs when multiple buttons are chosen

Below is a link to my jsfiddle application: http://jsfiddle.net/ybZvv/5/ Upon opening the jsfiddle, you will notice a top control panel with "Answer" buttons. Additionally, there are letter buttons, as well as "True" and "False" buttons. The functionali ...

javascriptjqueryhtml

Is jQuery.ajax failing in Internet Explorer due to a MIME type mismatch?

I am encountering an error when trying to fetch data from Google Finance using the provided code in Internet Explorer: SEC7112: Script from http://www.google.com/finance/info?infotype=infoquoteall&q=SHMN,^DJI,^IXIC,^BSESN,^SPX,^FTSE&callback=jQuer ...

jqueryjsoninternet-explorer

What is the best way to implement a modal that can toggle dark mode using the Konami code, with the added functionality of a close button?

Recently, I attempted to create a Modal window that would activate when the Konami code (↑↑↓↓←→←→BA) is typed. As someone new to JavaScript, I'm still learning and open to feedback. While I have the coding part figured out, I need assi ...

javascripthtmljquerycssmodal-dialog

What is the best way to incorporate an icon into my HTML search bar?

I'm having trouble getting the search icon from font awesome to display properly within my search bar. Here is the code I'm using: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/> ...

htmlcssbootstrap-5

Why does serializing a JavaScript Object to JSON result in "{}"?

Hello fellow developers, I'm currently working on setting up a LocalStorage feature for my web application. One issue I've come across is that all objects in the Model abstraction layer need to be serialized. I understand that functions aren&a ...

javascriptjsonserializationstringify

What is the best way to execute npx commands without the need to add 'npx' before each

For instance, I am able to simply run gulp instead of having to type npx gulp. I can skip the npx and just use gulp How can I achieve this for my own package? Even though I've included mycommand in the package npm bin configuration, I still constan ...

javascriptnpm

Having trouble updating the input value in AngularJS?

As I venture into customizing an AngularJS tutorial on a Saturn Quiz, I am transforming it from multiple choice to a fill-in-the-blank quiz. The challenge I face is that the first answer registers as correct or incorrect, but subsequent questions always s ...

javascriptangularjs

What is the process for selecting and accessing a DOM element?

Looking to utilize jQuery selector for accessing deep within the DOM. HTML <table> ...more here <tr> <td class="foo bar clickable"> <div> <div class="number">111</div> //Trying to retrieve "111" ...

javascriptjquerydom

Observing the CSS class of an input element during async validation does not yield the desired results

Recently, I implemented a bootstrap directive that monitors all the input elements on a form and updates the CSS of its parent div to display validation errors in a Bootstrap-friendly manner. The directive checks for the presence of the ng-invalid class in ...

javascriptangularjstwitter-bootstrap

Transform an Angular 2 application to seamlessly incorporate an SDK

I have been working on an Angular 2 application and I am curious if it is feasible to transform this into an SDK that can be easily integrated into other applications by simply adding script tags in their headers. If this conversion is not achievable, co ...

javascriptangularparse-javascript-sdk

How can I automatically update the preview image on a website shared on Facebook?

I tried the code below, but it doesn't seem to be working. Is it possible to dynamically achieve this? If yes, how can I do it? I initially used the og:image meta tag, but it didn't work due to browsers not reading JavaScript. Any assistance woul ...

javascriptfacebook

Obtaining a File type object from a URL (specifically an image) in Vue.js

Suppose I have an image URL like http://localhost/sample.jpg. What is the best way to save this image URL into a File object using native JavaScript API in my component? export default { created () { const imageUrl = 'http://localhost/sample.jpg ...

javascriptvue.jsvuejs2