Currently, I am exploring the process of coding a website that mimics the style of this particular webpage: . I am particularly interested in learning how to create a scrolling effect for text within a fixed area, while keeping the accompanying images stationary.
If you want to maintain a floating block of text or image above the moving images underneath, simply utilize CSS with "position:fixed;".
.floating-block {
position: fixed;
top: 25%;
right: 25%;
width: 50%;
border: 3px solid red;
background-color: white;
}
For instance: https://jsfiddle.net/NYCguyJason/vxcj31zj/
Alternatively... (clarifying your query) If your goal is to have an image in a fixed position that remains unaffected by page scrolling, check out this example:
https://jsfiddle.net/NYCguyJason/4n9ab0x6/1/
.fixedBackground {
width: 100%;
position: fixed;
top: 0;
}
Updates Updates **UPDATES Based on your recent comments **
In response to your feedback, here are some additional suggestions to achieve your desired outcome:
1. Pure CSS: Adjust the "z-indexes" so that specific elements remain on top of others. (higher z-index values stay on top. Remember to assign a "position" for utilizing "z-index")
Demo: https://jsfiddle.net/NYCguyJason/vxcj31zj/1/
.fullwidthblock { /* initial background */
position: relative;
z-index: 1;
}
.floating-block { /* floating block */
position: fixed;
z-index: 2;
}
.stayOnTop { /* elements further down that should always stay on top */
position: relative;
z-index: 3;
}
?Using jquery on your site?
2. Custom JavaScript or JQuery: Maintain the element fixed until reaching a certain point during scroll, then allow it to move along. Refer to this solution (note: using an older jQuery version): Stopping fixed position scrolling at a certain point?
3. A comprehensive JQuery plugin:
Sticky Kit --Looks promising
ScrollTo Fixed --Best option available, as demonstrated in the updated jsfiddle:
https://jsfiddle.net/NYCguyJason/bn9ekcds/7/
<!-- include jquery -->
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<!-- include plugin script -->
<script type="text/javascript" src="https://cdn.rawgit.com/bigspotteddog/ScrollToFixed/master/jquery-scrolltofixed-min.js"></script>
<!-- activate the plugin -->
<script type='text/javascript'>
$(window).load(function(){
$('.floating-block').scrollToFixed({
marginTop: 80, //starting point from top of window
// limit: $($('.stayOnTop')).offset().top
limit: 550 //trigger point for fixed element to scroll up
});
});
</script>
Imagine having a series of images with text below them, all wrapped in a div and centered. There are 20 of these elements with similar image sizes but varying amounts of text. The goal is to line up as many as possible on one row, each with 10px margin on ...
What is the best way to eliminate a particular value from an array? For example: array.exclude(value); Limitations: I must solely rely on pure JavaScript without any frameworks. ...
In the sidebar of my website, there is a small box that gets populated using ajax. There are 2 ajax functions set up: one to add items to the list and the other to delete them when the user clicks on the delete button. The HTML structure for this list is q ...
I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval When looking for solutions, I noticed that most a ...
I'm attempting to display a string that contains both spaces and line breaks. When I output the string as a value in an input field, the spaces are displayed correctly. <textarea rows={15} value={content} /> However, when I try to display ...
I created a unique component called ResultPill which includes a tooltip feature (implemented using vuikit). The text displayed in the tooltip is determined by a getter function called tooltip, utilizing vue-property-decorator. Here are the relevant parts o ...
I'm currently working on optimizing the code for my web application. While it functions, the performance is a bit slow and I am looking to make improvements: The main concepts behind the code are: The function retrieves the current buffer and conve ...
I'm currently developing an Ionic chat application and I need the content to automatically scroll down when the user clicks on the send text button. You can see a visual representation of this in the images linked below. https://i.stack.imgur.com/gwR ...
Explaining this may be a bit tricky, but here we go... I have multiple hidden divs that switch with each other when a link is clicked using $(document).ready(function(){ $('a').click(function () { var divname= this.name; $("#"+divname ...
I am facing a situation where I need to validate the name and code of a company, and if either one matches an existing record in the database, it should notify that it already exists. Additionally, when receiving data with isDeleted set to true, I want to ...
Can anyone provide a quick solution to help me with this issue? I am trying to remove all html tags from a string, except for the ones specified in a whitelist (variable). This is my current code: whitelist = 'p|br|ul|li|strike|em|strong|a', ...
Exploring the world of dropdown menus in CSS has led me to encounter some challenges. I am striving to ensure that the dropdown boxes appear on the same line as the button that triggers them. Below is the CSS code I have been working with: /* global style ...
While working on an AJAX project, I ran into this issue: http://jsbin.com/iriquf/1 The data variable contains a simple HTML string. After making the AJAX call, I noticed that the returned string sometimes includes extra whitespaces. I attempted to locat ...
For my nodejs app, I have created a script called app.js that serves as the entry point. This script initializes both the expressjs app and the http server. To clarify: The modules mentioned are not npm modules; they are custom files that I have written m ...
I am new to JQuery and have created a basic validation script to verify email addresses. However, it does not seem to be working properly. Can anyone provide guidance on how to correct this issue? <script> $( "#email" ).blur(function() { var ...
Is anyone familiar with websites like Hostinghood, where users can create a subdomain and upload HTML, CSS, etc.? I'm curious about how they operate and how I can create a similar site. This is my first question here, so please respond instead of disl ...
Up until now, I have been utilizing livequery which has served its purpose. However, it tends to slow down the page browsing experience, so I am in search of an alternative solution. I have a function that performs ajax on elements with a specific class l ...
Here is my code: $('input').live('keypress', function(event) { if (event.keyCode === 37) console.log("left key pressed"); else console.log("some other key press"); }); For a live demo, please visit http://jsfiddle.net/4RKeV/ A ...
I am facing a challenge with two text blocks of varying lengths. The left block contains short text while the right block may have lengthy content. Both blocks need to be displayed side by side, occupying 100% of the parent's width exactly. For a sim ...
Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...