Having trouble getting the show/hide div feature to work in a fixed position on the

Trying to show/hide a div using jQuery isn't working when the div is wrapped in a position:fixed element. However, changing it to position:relative makes the show/hide function work again.

You can see an example of the working version with position:relative here.

And here is the non-working version with position:fixed, where the show/hide functionality doesn't display properly.

var flag = 0;
var leftValue;
$('#button').on('click',function(){
      flag = !flag;
      leftValue = flag ? 100 : 0;
        $('#right').animate({ left: leftValue }, 'slow', function() {
            $('#button').text(function(i,v){
           return v == 'Close' ? 'Menu' : 'Close';
         });
        });
    });

/* show/hide DIV when passed the other div */
       $(document).scroll(function(){
       var vis = ($(document).scrollTop() > ($('.passedMe').offset().top+$('.passedMe').height()));
       $('.showHide').css('display', vis?'':'none')
       });
      /* show/hide DIV when passed the other div */

Any ideas on how to resolve this issue?

jquerycss

Answer №1

that's because the code here

$(document).scroll(function(){

the scroll function will work if you're scrolling the document or body, however, since you are using position: fixed, there is no scrollbar in the body, but the scrollbar is in the

<div id="right">
    ...
</div>

this causes the scroll function to never be called, so you must modify 

$(document).scroll(function(){
    ...
});

to

$("#right").scroll(function(){    // Depending on the container that uses position: fixed;
    ...
});

here is the Updated Fiddle

Answer №2

Implement scroll binding on your div#right

$("#right").scroll(function () {
    console.log("user is scrolling")
    var visibility = ($(document).scrollTop() > ($('.passedMe').offset().top + $('.passedMe').height()));
     $('.showHide').css('display', visibility?'':'none')
});

SEE DEMO

Answer №3

It seems like the CSS rule 

#right{position: relative/fixed }
may be affecting the element's behavior.

position: fixed: This positions the element relative to the browser window.

position: relative: This positions the element relative to its normal position in the document flow.

Answer №4

One explanation is that the fixed position automatically places elements at left and top coordinates of 0, whereas the relative position sets elements relative to their parent tag.

To solve this issue, you can add the following CSS:

top:20px

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

Trouble with jQuery's scroll() function on dynamically generated elements

I have a question about my current coding situation. I am trying to use this code snippet, but it doesn't seem to be effective for dynamically generated elements. My jQuery version is 1.4.2. $(".wrapper1").live("scroll",function(){ alert(123); ...

jqueryscroll

Retrieve data from a Rails controller using Ajax

Seeking assistance and insight for a coding dilemma I'm facing. In my Rails application, I have a controller named get_songs that retrieves a hash of songs belonging to the currently logged-in user. What I'm trying to achieve is to fetch this dat ...

javascriptjqueryruby-on-railsajax

CSS PopUp positioning

Can anyone help me with applying the position top and bottom of header to the NewUser div? I've tried but it's not working. How can I add !important; to the CSS? Maybe something like $("header")!important} <div id="divNewUser" class="CreateUs ...

jqueryhtmlcss

The CSS file is not connecting properly despite being located within the same directory

I have double-checked that both of these files have the correct names and are in the exact same directory. However, for some mysterious reason, the CSS is not applying any styling to my page. I would greatly appreciate any assistance with this issue! Belo ...

htmlcssexpress

What is the best way to add styling to my image when hovered over within a link on a responsive website?

I'm having trouble aligning the :hover state with the original footer image links. Here is an edited version of the flicker issue I encountered on Chrome, while nothing appeared on Safari. https://i.sstatic.net/ExdPW.png I apologize for linking to ...

htmlcss

jQuery registers the enter event, but does not proceed to trigger the enter action

Hey there, I've been experimenting with jQuery to capture the enter event. Something peculiar is happening though - after pressing enter in the text area, an alert pops up but the text gets entered only after that. Despite trying various solutions, I ...

javascriptjqueryhtml

Divide the information in the table across several pages for easier printing

I have encountered an architectural challenge with my server-side React app. The app renders charts and tables with page breaks in between to allow a puppeteer instance to print the report for users in another application. The issue I'm facing is mak ...

javascripthtmlcssreactjs

How can I position four DIV elements to the right of each other inside a parent DIV?

I am attempting to align 4 divs next to each other within a parent div at specific positions. The proposed div structure is as follows (referred to as the maindiv): <div> <div>1</div> <div>2</div> <div>3< ...

css

Retrieve key codes from inputs sharing the same class

My webpage contains multiple text inputs that all share the same class for various reasons. Currently, I am attempting to capture the ESC button press when an input is focused and alert whether the input has a value or not. However, this functionality on ...

javascriptjquerykeycode

The jQuery selector fails to refresh after the dynamic insertion of new elements

My selector is: $('section#attendance input:last') However, I add another input to section#attendance. I want the selector to target that new element since it should select the last element due to :last. However, for unknown reasons, it does no ...

javascriptjquerytabs

Having trouble loading background color or image in three.js

I've been struggling to load a background image or color on my webpage. Despite trying various methods, including commenting out javascript files and checking the stylesheet link, nothing seems to work. Even when I load the three.js scene with javascr ...

javascriptcssthree.js

PHP ajax handling multiple requests

I've searched high and low on the internet, but couldn't find a solution to my problem. I am making multiple jQuery AJAX calls to a PHP script. Initially, I noticed that each call was being executed only after the previous one had finished. To a ...

phpjqueryajaxasynchronousjqxhr

Adjust the dropdown width on a bootstrap form to match the size of the textbox

In order to maintain a combined width of 450px, I have two textboxes. One textbox includes a dropdown menu while the other does not. Both textboxes are part of an input group. The dropdown can switch between either textbox at any time. I need the width ...

htmlcssbootstrap-5

Encoding identification data from JSON using ColdFusion

Hello everyone, I've been puzzling over how to intercept and encrypt database record ID from a JSON request in ColdFusion. Below is the code I have so far, along with my unsuccessful attempt. Any assistance would be greatly appreciated. <cfquery ...

javascriptjquerymysqlcoldfusionmvc.jquery.datatables

Presentation: Troubleshooting Ineffective CSS3 Transitions

I have created a basic slideshow that can accommodate multiple images. Clicking on an image should move to the next slide, and once the last image is clicked, it should loop back to the first slide. The functionality of transitioning between slides seems ...

javascripthtmlcss

Center nested rows vertically within an alert box using Bootstrap

Can anyone provide some insight into why the inner row is not vertically centered within its alert-box? I feel like it might have something to do with the nested row structure. Here is a link to the code: https://jsfiddle.net/d2pg4xta/ <div class=" ...

htmlcssbootstrap-4

.malfunctioning in Internet Explorer due to compatibility issues

While I have not personally experienced this issue, there seems to be a problem with a form on our website. After changing the value (using .change()), the field is supposed to update by sending data to save.php. However, some users have reported that this ...

jqueryajaxformsinternet-explorer

Multiple hover highlighting techniques

Recently, I came up with an interesting concept for providing user feedback. My idea is to have a menu where hovering over it highlights an image that corresponds to the menu item, or vice versa - hovering over an image will highlight the corresponding men ...

jquerycsshover

Tips for achieving JSON formatting with JavaScript or jQuery

To achieve the desired output format, I am required to transform the provided input json. input json: [ { "key a": "value alpha" "key b": "value beta" "key c": "value gamma& ...

javascriptjqueryjson

How to Animate the Deletion of an Angular Component in Motion?

This stackblitz demonstration showcases an animation where clicking on Create success causes the components view to smoothly transition from opacity 0 to opacity 1 over a duration of 5 seconds. If we clear the container using this.container.clear(), the r ...

javascriptcssangulartypescriptangular-animations