I am in the process of creating a framework that requires displaying navigation (previous/next) when the second slide becomes active. This works correctly while scrolling down, but now I need to address the case where, while scrolling up from the bottom, the navigation (previous/next) should hide when the active state is removed from the second element (#box_two). For reference, please visit the link below:
To begin, you must first identify when the user is scrolling upwards. This can be achieved by implementing the following code:
// stores the last scroll value
var lastScrollTop = 0;
// detects the onscroll event
$(window).scroll(function(event) {
// assigns the current scroll value to a variable
var scroll = $(this).scrollTop();
// checks if the current scroll is less than the last scroll
// if true, the user is scrolling up
if(scroll < lastScrollTop) {
// perform desired action for scrolling up here...
}
// updates the last scroll value
lastScrollTop = scroll;
});
Next, you need to remove the CSS of the element. This can be done by removing a specific class, like so:
// selects the element and removes the CSS class
$("div").removeClass("target-classname");
Alternatively, you can directly change the CSS properties of the element using jQuery:
// updating multiple values at once
$("div").css({
"property": "value"
});
// updating a single value
$("div").css("property", "value");
Combining these steps, your code would look like this:
// stores the last scroll value
var lastScrollTop = 0;
// detects the onscroll event
$(window).scroll(function(event) {
// assigns the current scroll value to a variable
var scroll = $(this).scrollTop();
// checks if the current scroll is less than the last scroll
// if true, change the CSS of the div
$("div").css("property", "value");
// updates the last scroll value
lastScrollTop = scroll;
});
Code without comments:
var lastScrollTop = 0;
$(window).scroll(function(event) {
var scroll = $(this).scrollTop();
if(scroll < lastScrollTop) {
$("div").css("property", "value");
}
lastScrollTop = scroll;
});
You could also create a jQuery plug-in for the scroll up/down functions like this:
$.fn.scrollUp = function(callback) {
var self = $(this);
var lastScrollTop = 0;
self.scroll(function(event) {
var scroll = self.scrollTop();
if (scroll < lastScrollTop) {
callback.apply(self, [scroll]);
}
lastScrollTop = scroll;
});
};
$.fn.scrollDown = function(callback) {
var self = $(this);
var lastScrollTop = 0;
self.scroll(function(event) {
var scroll = self.scrollTop();
if (scroll > lastScrollTop) {
callback.apply(self, [scroll]);
}
lastScrollTop = scroll;
});
};
Usage example:
$(window).scrollUp(function(scroll) {
console.log(scroll);
$(this).find("body").html("You are scrolling up<br />" + "Scroll: " + scroll + "<br />");
});
$(window).scrollDown(function(scroll) {
console.log(scroll);
$(this).find("body").html("You are scrolling up<br />" + "Scroll: " + scroll + "<br />");
});
Using the jQuery plug-in for scrolling up event:
$(window).scrollUp(function(scroll) {
$("div").css("property", "value");
});
Code without comments:
$(window).scrollUp(function(scroll) {
$("div").css("property", "value");
});
Best of luck with your implementation!
The following snippet works by eliminating the className class from the specified Selector element:
Selector.removeClass("className")
Encountering a challenge in triggering the opening of a file dialogue on older iOS devices, particularly those running iOS 12. The approach involves utilizing the React-Dropzone package to establish a dropzone for files with an added functionality to tap ...
Currently, I am facing a syntax error with a form that I recently converted from PHP to utilize Jquery/Ajax. My main goal is to test the functionality of the form to ensure it can successfully submit and reset passwords. The specific error message I keep ...
Hey there! I'm currently working on implementing authentication protected audio/video streaming in an Angular app using REST API. The main objective is to ensure that the audio/video content is secure and not accessible to users who are not logged in. ...
I have implemented client side validation using jquery.validate.js and jquery.unobtrusive.ajax.js, both of which are referenced on my webpage. The form inputs are generated using @Html.TextBoxFor(). All client side validation is working correctly except f ...
I have a requirement where I need to display the last two li elements from an ul list on a new line if the screen width is less than 625px. The code snippet below achieves this functionality: ... ... ... ... However, this code fails valida ...
I have a JSON file that contains data from different years for "male," "female," and "both" categories. I want to set the minimum value in my domain to be the lowest value across all three columns and do the same for the maximum value. Is there a way for ...
The issue arises when the ajax request is not triggered after the URL has been rewritten using mod_rewrite. However, by simply removing the trailing slash from the link, the functionality works as expected. For example: It works with these URLs http:// ...
Within my coding snippet below, I have constructed a function that incorporates asynchronous loading of all essential files required for an application. Once all the files are successfully loaded, the app execution progresses: function loadDATA(){ var ...
There are numerous nested divs within my code: <div> <div> <div>Apple</div> <div> <div>Banana</div> <div>Grape</div> </div> </div> <div>Craisin</div&g ...
Example A functionality in the example allows users to add images to a container by clicking on checkboxes. However, there is an issue where when a checkbox is checked on one page to store an image, and then another checkbox is checked on a different page ...
My website has a left side column and a right side column, which display correctly in Firefox and Chrome. However, I am experiencing issues with Safari. Any insights on what could be causing this problem and why it only occurs in Safari? View the code on ...
I am in need of assistance. I have a bootstrap template with a footer, and I am trying to integrate a modal. However, when I click the modal button, the modal does not appear. Is there a missing plugin that needs to be added to my template? <script sr ...
I am currently working on setting up a contact page that includes Google Maps to show the location of a meeting place. Here is the code I am using: JavaScript (function(){ document.getElementById('map_canvas').style.display="block"; var ...
My goal is to conceal my API key using dotenv. Interestingly, when I replace require('dotenv').config(); with my actual API key in the code as apiKey: process.env.API_KEY, it works fine despite not using process.env.API_KEY. I made sure to inst ...
I'm having trouble making an image clickable within a hover effect overlay that displays text and a link. I attempted to turn the overlay into a link, but it wasn't successful. http://jsfiddle.net/cno63gny/ Please disregard the placeholder text ...
Can anyone provide the code for both the component and service to implement multiple deletion using checkboxes in Angular 2? I have only posted the HTML code, but I need assistance with the components and services as well. The current code allows single ...
When the page loads, I have an empty array. Since there are no values stored in this array, I disabled the button using ng-disabled="array1.length==0". Now, on the page that opens up, there are four drop downs present. My goal is to enable the button once ...
I'm attempting to display variables using the following relationships: First: public function group(){ return $this->belongsTo(Group::class); } Second: public function joinGroups(){ return $this->hasMany(JoinGr ...
Is there a way to hide certain Select2 options? When I attempt to use CSS like this: <option style="display: none;">...</option> Select2 does not seem to recognize it, unlike when an option is disabled or set as "readonly". Does any ...
I am facing an issue with my code that involves an array containing various fruits with product ID and price as keys for different values. While I am able to retrieve the correct price, I am struggling to get the name of the chosen product. For instance, ...