My website includes a div positioned below the header that contains quick links. I have implemented the solution from http://davidwalsh.name/persistent-header-opacity to ensure this div remains on-screen at all times. However, I would like it to appear at the top only after the user has scrolled past its original position (position:fixed;top:0px;). Essentially, I do not want it to stick to the top until the user has passed it while scrolling. How can I achieve this?
If you want to achieve this effect using JavaScript, you can listen for the scroll event and adjust the style based on the position of the scroll:
var header = document.getElementById('hmenus');
var headerTop = header.offsetTop;
window.addEventListener('scroll', function() {
var scrollPos = window.scrollY || document.documentElement.scrollTop;
if (headerTop < scrollPos) {
header.style.position = 'fixed';
header.style.top = 0;
} else {
header.style.position = "";
header.style.top = "";
}
});
The element with the ID "#hmenus" will be affected by the scrolling behavior. Give it a try in your browser's console!
Check out this innovative solution with a fresh perspective.
Utilize the CSS property position:sticky to create a scrolling effect.
Read more about it in this informative article:
You can also see the old way of achieving this with a demo.
For a demonstration of the sticky position feature, check out this link: sticky position demo
Help Needed! I am facing an issue with my app created using Visual Studio Community and Cordova. Everything works perfectly when I simulate it on my PC, but when I install it on my phone, the fonts just won't display correctly. I have tried all the s ...
Seeking assistance on how to extract the text specifically within a bulleted list from a Wikipedia article using BeautifulSoup. I am aware that list items are enclosed in <li> tags in HTML, regardless of the type of marker used before each item in t ...
i am trying to access the next element with the same class name in HTML. The HTML tag structure looks like this: HTML: <section class="post"> <img class="pecintakomik" src="/images/top/op.jpg" alt="pecintakomik.com" /> <div class=" ...
I am struggling to align a logo on the left side of my website, with text on the right next to it, all placed above the navigation bar. Despite my efforts, I just can't seem to get them positioned correctly! CSS .headerLogo{ float:left; marg ...
Hey there, I'm not the most tech-savvy person, but I managed to come up with this code for page redirection. Unfortunately, I couldn't quite get the fade out and fade in effects to work properly when executing it. If anyone out there can help me ...
There seems to be an issue with my Facebook share functionality as it's not reading any of the meta tags. It is indicating that the required properties such as og:url, og:type, og:title, og:image, og:description, and fb:app_id are missing. <script ...
I'm embarking on a new website project and I'm contemplating whether using a React UI Framework is the way to go, or if I should create my own components and grid system from scratch. I've been drawn to projects like ElementalUI's take ...
I am currently trying to figure out how close I am to successfully cloning this div. Honestly, I am a bit lost at this point and could really use some assistance. Should I consider using jQuery for this task? <div id="question20">20. Details of Chi ...
I'm looking for a way to create a website image using just code, without the need for an actual image file or image tag. Is there a method to do this? Would I use CSS, Javascript, or HTML5 for this task? If using JavaScript to dynamically generate the ...
Currently, I am storing form data in json format and encountering an issue when trying to load values from a previously created json file. The plain old JavaScript function provided below successfully loads values into a form from a file, effectively resto ...
Hey there, I've got a coding dilemma involving three number inputs, which I will refer to as the first input, second input, and third input for clarity. Here's the setup: <div> <form name="formOpenMax"> <div clas ...
I'm struggling with resizing and moving a YouTube video embedded using the Youtube API. I'm not a web designer, so I'm facing some difficulties. When trying to resize the window, I can't seem to move or resize the video within an iframe ...
Currently, I am working with Asp.Net MVC and SQL server. My goal is to update the HTML content dynamically with new data from the database without having to reload the entire page. What would be the most efficient approach to achieve this? @foreach (var ...
I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...
I need to enable/disable user accounts by clicking on an anchor. The list of users is created dynamically using a loop. Here's an example of an anchor tag: <a href="http://www.example.com/users/deactivate/44" class="btn btn-success" title="Deactiv ...
I have created a custom HTML page with fields and a button to fill out in order to generate a new Outlook mail item. To format the body of the email using HTML, I am utilizing VBScript to create the new mail item. <script> function generateEmail() { ...
https://testing007.s3-api.us-geo.objectstorage.softlayer.net/1A23CDC6F75811E6BFD706E21CB7534C---prof__6.jpg This link displays correctly on browsers like Chrome and Firefox, but does not show up on Safari. ...
Currently, I am in the process of creating a web map using the Google Maps Javascript API. My objective is to display a Google Fusion Table containing buildings in Boston exclusively on a stylized map named "Buildings." When I switch to the Buildings map t ...
Is there a way to capture space bar input with an onchange event in JavaScript? <html> <head> <script type = "text/javascript"> function lala(aa){ console.log(aa + " dasda"); } </script> </head> <body> <input ty ...
There seems to be some issues with transferring my website from a custom domain on Hover. When I try to import it to anthematics.github.io, only the HTML loads while images and CSS are missing. <link rel="stylesheet" href="theme.css" type="text/css"> ...