Continuous scroll notification within the fixed menu until reaching the bottom

I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle:

HTML:

<div class="menu-fixed">I am a fixed menu! </div>
            <div class="bodyContent">I am the body content of this page
            <div class="notification">I am a notification message! 
                      Scroll me to the bottom of top menu only! and back.</div>
    </div>

CSS:

.menu-fixed{
    position: fixed;
    text-align: center;
    width: 100%;
    height: 100px;
    border:1px solid blue;
    background: rgba(0,0,0,0.3);
    font-size:30px;
}

.bodyContent{
    padding-top:120px;
    height:1000px;
    width:100%;
    background:lime;
    text-align: center;
    font-size:50px;
}
.notification{
    height: 100px;
    left: 80%;
    position: absolute;
    width: 200px;
    background: rgba(255,255,255,0.9);
    font-size:20px;
}

If anyone could assist with implementing the scrollTo function for this scenario, I would greatly appreciate it. Thank you!

javascriptjqueryhtmlcss

Answer №1

It seems like you're looking for a solution to your question. Here's some code that might help you:

$(document).ready(function() {
    $(window).scroll(function() {
        var menuHeight = $(".menu-fixed").outerHeight();
        var windowScrollTop = $(window).scrollTop();

        if (windowScrollTop > 80) {
            $(".notification").css({ top: windowScrollTop + menuHeight });
        }
        else {
            $(".notification").css({ top: 'auto' });
        }
    });
});

You can test the updated code in this JSFiddle link: http://jsfiddle.net/VPzxG/1823/

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

Tips for obtaining a collection of subelements based on a particular index in jQuery

I have a sample DOM structure: <div class="x"> <div class="y"> <span>a</span> <span>b</span> <span>c</span> </div> <div class="y"> <span>d</span> <span> ...

jqueryjquery-selectors

How come the gridApi.on.edit.beginCellEdit function in angular-ui-grid does not immediately refresh the dropdown options after being updated?

I am encountering a similar issue as described in this post Regarding the assignment of ui grid value drop-down box before beginCellEdit event fires in Angular However, I have noticed a slight difference. Even after updating the editDropdownOptionArray, th ...

javascriptangularjsangular-ui-grid

jQuery's $.ajax PUT request fails due to cross-domain issues, with the error message stating that the method PUT is not permitted by Access-Control

While making cross domain requests using jQuery's $.ajax to interact with a RESTful PHP API, I have configured the necessary headers in PHP as follows: header("HTTP/1.1 $code $status"); header('Content-type: application/json'); header(&apos ...

jqueryajaxcross-domainput

The ajax request does not support this method (the keydown event is only active during debugging)

I've encountered a strange issue with an AJAX request. The server-side code in app.py: #### app.py from flask import Flask, request, render_template app = Flask(__name__) app.debug = True @app.route("/myajax", methods=['GET', ...

javascriptajaxflask

Tips for crafting services using $q and $http requests while avoiding redundancy

Is there an elegant way to write AngularJS services without repetitive $q syntax? I currently write services like this: (function() { function ServiceFactory($q, $timeout, $http) { return { getFoo: function() { va ...

javascriptangularjsangularjs-service

Discover every user receiving a database object instead of individual records with mLab

While using my express application with the mLab database, I encountered an issue. When trying to find only one record, everything works fine. However, when attempting to retrieve a list of users from the database, I receive the following response. Query ...

javascriptnode.jsmongodbexpressmlab

deleting an object from an array in JavaScript

I have a collection of objects that looks like this: [{ "id": 2, "price": 2000, "name": "Mr Robot T1", "image": "http://placehold.it/270x335" }, { "id": 1, "price": 1000, "name": "Mr Robot T2", "image": "http://placehold.it ...

javascriptjqueryobject

The issue with CKEDITOR is that it fails to send data through ajax upon the initial submission

When using CKEDITOR, I am experiencing an issue where my forms do not send data to the server on the first submit. If I click the submit button once, empty fields are sent without any input from me. However, when I submit the form a second time, only then ...

javascriptphpjqueryajaxforms

Issue with improper lighting on Three.Geometry objects when using LambertMaterial in Three.js

After enhancing my initial version of this inquiry (previously asked question) with a JSFiddle showcasing the latest build of Three.JS and illustrating the lighting issue on Three.Geometry, I encountered difficulties with dependencies in Stack Snippets. Ho ...

javascriptthree.jslighting

Placing a div with position:absolute inside another div with position:absolute and turning them into position:fixed

HTML <div class="box1"></div> <div class="box2"> <div class="box3"></div> </div> CSS Properties of box1, box2 and box3 are: box1 { position: absolute; z-index: 100; background-color: rgba(39, 39, 39, 0.3) ...

javascriptjqueryhtmlcss

Using the combination of PHP and AJAX, modify files in real-time

Looking to dynamically change files based on screen resolution, I have three files: index.php main.js testA.php testB.php The index.php file will dynamically call testA and testB. If the screen resolution is desktop size, index.php should include testA ...

javascriptphpajax

I continue to encounter the error "Unexpected token b in JSON at position 0" when attempting to parse JSON data

Having some trouble with my code that generates an HTML page. The signup function allows users to register and create a password, while the checkpassword function is supposed to verify if the correct password is entered for the given username. I seem to be ...

javascriptjson

Utilize custom SMTP with JavaScript to dispatch emails

I'm wondering if it is possible to send emails using just JavaScript (I am working on a PhoneGap app). I envision a scenario where I can connect to a specific SMTP server with a login and password, and then send emails using that connection. I have al ...

javascriptcordovaemailsmtp

Is a Selenium loop a viable option?

</head> <body> <table cellpadding="1" cellspacing="1" border="1"> <thead> <tr><td rowspan="1" colspan="3">test</td></tr> </thead><tbody> <tr> <td>click& ...

javascriptjqueryhtmlselenium-ide

Creating dynamic selection options in an HTML select tag using PHP

When retrieving category and sub-category information from an API json file, the API returns category objects with a "parent" attribute. Main category objects have a parent attribute equal to 0, and sub-category objects have the parent attribute equal to t ...

javascriptphphtmljquerydrop-down-menu

Build a Docker container for a project that requires utilizing yarn link for dependencies

While working on my NextJS project, I made the decision to utilize yarn as my package manager and utilized yarn link for import aliases/absolute imports. This feature of yarn is quite handy and is recommended for managing aliases within a project. However, ...

javascriptreactjsdockernext.jsyarnpkg

Displaying a PHP variable on the console through the power of jQuery and AJAX

I'm attempting to display the value of a PHP variable in the browser's console using jQuery and AJAX. I believe that the $.ajax function is the key to achieving this. However, I am unsure about what to assign to the data parameter and what should ...

javascriptphpjqueryajax

Using Angular.js to fetch information from a MySQL database

I'm currently trying to retrieve data from a MySQL database in an Angular.js application. I have gone through multiple tutorials, but unfortunately, none of them have been successful for me. I have a PHP script that returns a JSON array with example ...

javascriptphpmysqlangularjs

Utilizing Vue's string-based class binding feature?

Can Vue class binding work with strings? For example: <div :class={open: target == 'myString'}></div> var app = new Vue({ target: null }) It works when I don't use quotes <div :class={open: target == myString}></div ...

javascriptcssvue.js

Leveraging useEffect and useContext during data retrieval

I'm currently in the process of learning how to utilize React's Context API and Hooks while working on a project that involves using fetch(). Although I am able to make the request successfully, I encounter an issue where I can't retrieve t ...

javascriptreactjsnext.js