I am currently working on a sticky sidebar that catches and stays fixed at a certain scroll point using JavaScript. However, I am facing an issue where I need the sidebar to catch when scrolling back up and not go further than its initial starting point.
$(window).scroll(function(e){
$el = $('.why_social');
if ($(this).scrollTop() > 735 && $el.css('position') != 'fixed'){
$('.why_social').css({'position': 'fixed', 'top': '-62px'});
}
});
Make sure to include a check for the opposite condition as well. Here is a simple example to help you get started.
$(window).scroll(function(e){
$el = $('.why_social');
if ($(this).scrollTop() > 735 && $el.css('position') !== 'fixed') {
$('.why_social').css({'position': 'fixed', 'top': '-62px'});
}
if ($(this).scrollTop() <= 735 && $el.css('position') === 'fixed') { {
$('.why_social').css({'position': ''}); // remove `position: fixed;`
}
});
By the way, if you are open to using a ready-made solution, you may want to consider checking out Bootstrap's Affix Plugin. You can access the source code at https://github.com/twbs/bootstrap/blob/master/js/affix.js and refer to the documentation on how to implement it. Simply adding .affix { position: fixed; } to your CSS should suffice.
I have implemented an Infinite Scroll feature that dynamically loads more data from a database as users scroll to the bottom of the page. However, I encountered an issue when trying to include this functionality in another .PHP file. If I insert any HTML ...
Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...
Imagine we have multiple divs displayed on a screen: https://i.stack.imgur.com/jCtOj.png ...and our goal is to move them collectively, either to the left: https://i.stack.imgur.com/KBfXC.png ...or to the right: https://i.stack.imgur.com/c1cUw.png An ...
After clicking on two different positions on the canvas rectangle, I noticed that it was being drawn in the wrong location due to issues with the responsive canvas size. Despite attempting to scale the pointer position based on both the canvas and window w ...
I am currently in the process of setting up a dedicated API backend for a website that operates on /mypath, but I am encountering issues with NGINX not properly proxying requests. Below is the nginx configuration located within the sites-enabled directory ...
I am currently using a script for a slider known as Slicebox, and in order to have different image sizes for mobile and desktop views, I need to duplicate the feature on my website. Although it's not ideal, I really like this slider and want to explo ...
I am still learning about Node and I'm struggling to integrate an NPM package with my React project running on Node. Currently, I have a React component that successfully uploads a zip file through Node server scripts. Now, I am working on the next s ...
My shopping cart website utilizes ajax and Codeigniter to add products without reloading the page. Originally, I displayed a single net weight for each product. However, I recently switched to multiple net weights for the same product. Unfortunately, I am ...
Currently, I am working on a project that requires the use of judge0 API. Initially, everything was running smoothly when I utilized it with RapidAPI. However, I made the decision to switch to a self-hosted setup using a docker-compose.yml file. While my ...
I have set up a portfolio website that includes my resume. I am trying to make it so that when someone visits the route http://localhost:3000/resume.pdf, they can view my resume directly. The resume.pdf file is located in my public folder. However, instead ...
In the midst of my spring MVC project, I find myself in need of implementing a file path chooser for users. The goal is to allow users to select a specific location where they can save their files, such as C:\testlocation\sublocation... Despite r ...
Is there a bug in the code? Here are some examples: for(i=0;i<2;i++){ $.ajax({ url : 'process.php', type: "POST", data : "abcd", success : function(data){ alert(i); } }) } or for(i=0;i<2;i++){ $.post("proc ...
Looking for a method to effortlessly apply styles to all elements within a specific class without repeating code like this: .element-wrapper .coin-box{ margin: 10px; float: left; } .element-wrapper .platform{ margin: 10px; float: left; } .eleme ...
Hey, I recently worked on formatting dates in jQuery Ajax. After fetching a date value from the database, I converted it to the format dd-MM-YYYY. However, there seems to be an issue where I'm receiving the previous month. For example, if the database ...
I am currently working with a .html file where I need to send a value using a submit button. Here is how the code looks: <HTML> <HEAD> <TITLE>ABC Corporation</TITLE> </HEAD> <BODY> <FORM ACTION="http://192.168.2.2/cg ...
When passing a static array to jQuery token input, I encountered an issue where the search results are not exact matches due to the absence of server-side queries. For example, with an array ['aa','bab','aab','abb'] ...
I encountered an issue with vue cli. Running npm run serve went smoothly, but when I tried dev mode using npm run build-dev, the build process finished with a blank page displayed. The error message received was "Uncaught SyntaxError: Unexpected token &ap ...
Currently, I am utilizing Angular Drywall to construct my website. By default, the alignment is centered which does not suit the template requirements that call for it to occupy the full 100% body width. body{ width:100%; margin-left:0; paddin ...
When working with PHP, it is common practice to declare variables inside if statement parenthesis like so: if ($myvar = myfunction()) { // perform actions using $myvar } Is there an equivalent approach in JavaScript or TypeScript?: if (const myvar = myf ...
I am completely new to Aurelia. How can I modify the code below in order to implement a dummy HttpClient, such as a json reader, that will provide a static set of json data without the need for a server during development? import {inject} from 'aure ...