Tips for creating a dynamic inner DIV that follows the scroll position of an outer DIV without relying on a fixed width

I have created a series of DIV elements to represent a chart. The key element is everything enclosed within the "rightPanel" section in the following code snippet.

The "topPanel" section has an absolute position, and its top value (top: 0px) needs to be adjusted when scrolling through the rightPanel DIV. Despite having what seems to be correct jQuery code, it is not triggering on the rightPanel scroll event. Here is the relevant code:

HTML

Main
  <div class="mainContent">
    <div class="leftPanel"> Left Panel
    </div>
    <div class="rightPanel">Right Panel
      <div class="dataPanel">Data Panel
        <div class="topPanel">Top
        </div>
        <div class="bottomPanel">
            &nbsp;
            <p>Data Data Data Data Data</p>
        </div>
      </div>
    </div>

CSS

.mainContent
{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    overflow-y: scroll !important;
    position: relative;
    border: solid 3px blue;
}
.leftPanel
{
    width: 225px;
    position: relative;
    overflow: hidden;
    border: solid 3px pink;
    float: left;
}
.rightPanel
{
    overflow: hidden;
    border: solid 3px orange;
}
.dataPanel
{
    width:21355px;
    height: 3253px;
    border: solid 3px yellow;
}
.topPanel
{
    position: absolute;
    width: 21355px;
    border: solid 4px purple;

}
.bottomPanel
{
    clear:both;
    border: solid red 3px;
}

jQuery

var sOffset = $(".topPanel").offset().top;
var shareheight = $(".topPanel").height() + 43;
$(".rightPanel").scroll(function() {
    alert('in the function');
    var scrollYpos = $(document).scrollTop();
    if (scrollYpos > sOffset - shareheight) {
        alert('inside');
        $(".topPanel").css({
            'top': '61px',

        });
    } else {
        alert('else');
        $(".topPanel").css({
            'top': 'auto',

        });
    }
});

You can view my implementation on this fiddle http://jsfiddle.net/LH7g7/

Answer №1

The reason for this issue is that the overflow (scroller) is applied to the mainContent, not the rightPanel.

To resolve this, you must hide the overflow of the main contents and set the overflow display for the rightPanels. Additionally, you will also need to specify the height for the rightPanel in order to make the overflow visible.

Update the following in the CSS:

.mainContent
{
    width: 100%;
    max-height: 500px;
    overflow: hidden;
    position: relative;
    border: solid 3px blue;
}

.rightPanel
{
    overflow-y: auto;
    border: solid 3px orange;
}

Then, adjust the height of the rightPanel using JavaScript:

 $(".rightPanel").height($(".mainContent").height())
 $(".rightPanel").scroll(function() {'Code here'});

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 and Angular are used to activate form validation

Update: If I want to fill out the AngularJS Forms using the following code snippet: document.getElementById("username").value = "ZSAdmin" document.getElementById("password").value = "SuperSecure101" How can I trigger the AngularJS Form validation befo ...

jQuery UI Slider is malfunctioning (code example included)

I've implemented a jQuery UI slider on my website, and it's functioning quite well. You can check out the slider HERE. However, I've noticed that when I click on 'back to the top', the page smoothly scrolls up. But when I use the ...

Implementing the 'active' class on a hyperlink in CodeIgniter: A step-by-step guide

My template is divided into three sections: header, footer, and content. The main menu links are located in the header section. I am trying to apply a CSS class 'active' to the hyperlink that is selected. I have written jQuery code to achieve thi ...

Safari not fully supporting CSS translate functionality

When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari. In Safari, the elem ...

Organizing flex-items in a specific manner

My goal is to organize flex-items in a specific layout: To achieve this, I am referencing the following example: .Container { display: flex; overflow: hidden; height: 100vh; margin-top: -100px; padding-top: 100px; position: relative; widt ...

How can you add draggable functionality to a Bootstrap dropdown menu?

My custom bootstrap dropdown design <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown <span cla ...

Automatically generated Dropdown failing to respond to jQuery event

$(document).ready(function() { $('[id^=drop_id]').on('change', function() { selected = $(this).find('option:selected').data('tid') $.getJSON('path/'+selected,function(data){ v ...

IE browser transparency effect on canvas

I have encountered an issue when drawing a shape on canvas using kineticJS and setting the fill to none. The code snippet I am using is below: var rect = new Kinetic.Path({ x: 0, y: 0, data: 'm 2.0012417,2.0057235 ...

Manipulating the DOM by nesting an icon within a button element in HTML

Currently working on my todo list project and I have a question about using innerHTML. I'm curious if I can include an icon inside of a button tag like this: btn.innerHTML = '<i class="fas fa-times fa-lg"></i>'; So, wo ...

JavaScript Bingo Game - Create Interactive Cell Selection

Below is the HTML code that I am using to create a Bingo card: ... <th class="orange">B</th> <th class="orange">I</th> <th class="orange">N</th> ...

The unexpected behavior occurs when jQuery mobile causes the page to reload

Incorporating jQuery mobile with other systems, I have a scenario where I must display an ajax loaded dialog and send data back to the main page based on the link clicked (with class link). $(document).live("pageinit", function(event) { $(document).on ...

The CSS animation will run infinitely, but the desire is for it to only complete one iteration

My div element is set to animate by increasing in width and opacity over an image. However, I only want it to run once but it seems to loop infinitely. Can anyone help me achieve a single iteration? Thank you! Here is the markup: <div class="capback"& ...

Implementing both fancybox and a hover remove icon functionality on a single image

I came across a solution on this question here, outlining how to implement an overlay hover remove icon on thumbnails. I tried incorporating it into my page, along with fancybox, but unfortunately, I'm encountering issues getting both functionalities ...

Clearing error message boxes in Jquery Validation after input corrections is essential for providing a seamless user experience

Currently, I am utilizing the jQuery validation along with the plugin found at bassistance.de. The validation errors are displayed in a specific area on the screen rather than next to the invalid form element. This is achieved by including an empty errorPl ...

Learn how to implement media queries using CSS3 with an HTML5 form

Struggling to implement Media Query in my HTML5 form that was styled using CSS. Any assistance would be greatly appreciated. <div class="form"> <form action="Login.jsp" method="post" > <input type="text" name="username" placeholder="usernam ...

Display a variety of images all in one slider page effortlessly with the ngb-carousel feature

I'm currently utilizing Angular 6 and ng-bootstrap to implement a carousel feature on my website. Although the carousel is functioning correctly, I am facing an issue where only one image is being displayed in each slide instead of four images per sl ...

Creating a dynamic slide JavaScript carousel

I am in search of a JavaScript library that can help me create a slider similar to AnythingSlider or . The key feature I am looking for is the ability to dynamically add new slides and seamlessly transition to them. It is also important that the slider all ...

What is the best way to show a message next to a text box in a form?

I have a form called test.php with two buttons for entering an email ID and user ID, as well as a submit button. Upon clicking the submit button, my code checks if the email ID exists and displays a message to the user. I want to show this message next to ...

The visibility of a CSS class is rendered non-apparent when formed through the implementation

function retrieve_files(){ $.ajax({ type: "GET", url: "retrieve_files.php", cache: false, success: function(result){ $("#insideT").html(result); } }); } retrieve_files.php $dir = 'upload ...

Trouble with Ajax call after transitioning from getJSON to Amcharts

Here is the method for making an AJAX call in a JavaScript file to create a bar graph using Amcharts. The script is located in the bar.js file: plot_graph(); function plot_graph(){ $.ajax({ url:back+"/cool?day=30", type: "GET", dataformat ...