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.
Can the ternary operator be utilized to append '...' if a string surpasses 50 characters? I attempted this approach, however it did not work as expected. {post.title.substring(0, 50) + post.title.length > 50 ? '...&ap ...
I am facing an issue with my custom directive implementation. I have a custom directive that contains a table which references a controller. The ProjectController part works fine when it is not included in the code, but as soon as I put everything into the ...
I am seeking a solution to prevent div elements from being positioned below my navigation/information bar when the screen width is minimized. The information bar has a height of 1200px and I would like it to stay on the left side without any overlapping fr ...
Currently, I am developing a Jquery project that involves allowing the user to drag a 'pill' into a 'cup', and then displaying the number of pills in the cup. However, I am encountering an issue where if the user moves a pill once it&ap ...
UI https://i.stack.imgur.com/c2cqo.png Here is the PHP code I have been struggling with. It is meant to save input data into a database, but I can't seem to get it right: if (isset($_POST['rjctrsn-data']) && !empty($_POST['rjc ...
I'm facing an issue where additional elements added to my array within a controller of a directive are not being displayed in the view. What's even more frustrating is that when I print my model, it doesn't reflect the new elements that have ...
My Setup: I've written some basic code snippet below: const onSuccess = () => { console.log('success'); } const onError = () => { console.log('error'); } navigator.geolocation.getCurrentPosition(onSuccess, onError) ...
I am experiencing an issue with my form that contains around 10 input text boxes. When I press the enter key from an input text box, it skips the text boxes in between and goes directly to the submit button. This problem occurs only when using the keyboard ...
Recently, I developed a Tricycle Patrol app designed to address the prevalent issue of reckless tricycle drivers in our city. Users can log in and submit reports through a form that includes fields such as: - created_at - description - lat - lng - plateNu ...
My original use of bodyParser looked like this: app.use(bodyParser.json()); However, I now have a need to conditionally use bodyParser: app.use((req, res, next) => { if (req.originalUrl === '/hooks') { next(); } else { ...
Within my yii application, I have implemented Tabs and am loading content via ajax using renderPartial(). To prevent redundant script loading, I have set processOutput to false. As a result, I aim to manually load all necessary scripts once on the index pa ...
If I were to create 2 different sets of tables like this: <table id="Table1"> <tr> <td></td><td></td><td></td> </tr> </table> <table id="Table2"> <tr> < ...
Exploring My Context API Provider File (Exp file) import react form 'react'; import {createContext} from "react"; export const ContextforFile = createContext(); export function ContextData(props){ let rdata=props.data return( &l ...
In my custom database setup, which mirrors a collection in MongoDB containing JSON objects. export const roles = [ { _id: "870c4350-3cf5-4f35-8429-513bd86c6734", programId: "e3e20d57-571d-45ab-b13a-b07d29fcf968", profileId: "3cbaadcf-41e1-42 ...
I'm puzzled as to why I keep encountering this error. I am attempting to utilize the Vuex store in a composition function, but for some reason, it keeps throwing an error regarding inject (even though I'm not using inject at all). My application ...
I'm currently working on a node Js project and I'm encountering an issue while saving form values to a mongoDB database. I've been troubleshooting but can't seem to pinpoint the cause of this error. The error is occurring at the router. ...
Consider this code snippet: /* css */ :root { --text-color: #666666; } input { color: var(--text-color); } In Javascript, how can I determine the name of the CSS custom property (variable) being utilized? // javascript console.log(document.querySel ...
I currently have a code snippet that looks like the following: arr = [ { val1: a, val2: b }, { val1: a, val2: b }, { val1: a, val2: b } ] <div v-for="single in arr"> <button v-on:click="addSome"></button> </div> When I c ...
I am struggling to align the div "nav2" on the same line as "nav1", but it just won't move up. I've tried using float, but it's not working. * { padding: 0; margin: 0; box-sizing: border-box; } body { width: 100%; height: 100vh; } #navb ...
After attempting to add jsmin.exe as a post-build event in my VS 2010 project, I encountered an "error code 9009" when building the project. I tested this in the command prompt and found that it works if I navigate to the folder and run: jsmin < debug ...