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>
My spring MVC application is experiencing an issue when using jQuery AJAX to send data to the server from my HTML page. The error message indicates a problem with dataType: 'json', specifically pointing out the unexpected symbol :. $(document).r ...
Looking for an effective way to upload an image when the type is “file”? The goal here is to send an image from an image tag to the server without converting it into base64 due to size constraints. <form id="form-url"> <image src ...
I'm currently working on a react header that uses conditional rendering to show different elements based on the URL or user login status. However, I'm facing an issue where only one button is being rendered instead of two side by side in my defau ...
Here's the JavaScript code I have placed inside the head tag of my HTML: <script type="text/javascript"> function over1() { var img1 = document.getElementById("1").src; document.getElementById("big").src = img1; } function out() { ...
I'm struggling to figure out how to extract the modified content from a CKEditor instance and send it to a URL. I've been referencing something like this: but I can't seem to determine how to save the changes. Is there a way to post the up ...
Check out the function below. I can see an object in the console.log using res: login2(){ console.log(this.user_form_value); console.log(this.password_form_value); this._loginService.login(this.user_form_value, this.password_form_value).subscr ...
Can someone help me with styling my code? I want to display a text message inside a square box with dimensions of 1x. <span class="fa-stack fa-5x" style="margin-left:5%"> <i class="fa fa-square-o fa-stack-2x"></i> </span> ...
Currently building an application in node.js. I am struggling with referencing the "email" element in the "userData" object within the Order model when using the find method. Any suggestions on how to properly refer to it? Order model: const orderSchema = ...
I recently developed a Vue.js application using vue-loader and now I am trying to integrate an npm package that I have installed. Here is the code snippet: var x = require('package-name') Vue.use(x) However, I encountered the following ...
I am having difficulty grasping the intricacies of the jquery text() function when used with HTML Entities. It appears that the text() function converts special HTML Entities back to regular characters. I am particularly uncertain about the behavior of thi ...
I need to dynamically change the text on a button in my header based on the current route. When on the login page, the button should say "Signup" and when on the signup page, it should say "Login". I want this text change to happen without having to click ...
Currently in my React project, I am utilizing TypeScript along with PropTypes to ensure type checking and validation of props. It feels redundant to write types for both TypeScript and PropTypes, especially when defining components like ListingsList: inte ...
After users complete a quiz, they receive their results. The client now wants to implement a "Print Results" feature that opens in a new window with customized CSS. I'm trying to figure out how to transfer the results to the new window using JavaScri ...
Is there a way to reset the timer when a button is clicked? Having a reset button would allow users to revisit the timer multiple times without it displaying the combined time from previous uses. Check out this code snippet for one of the timers along wit ...
Greetings! I am working on designing a decision tree that dynamically generates options based on user selections and API responses. When a user chooses a reason option, the corresponding reasons are fetched from the API and displayed in a select dropdown. ...
Recently ran into an issue where a button triggers a command to a Perl script, causing the page to continuously load for 60 seconds. To provide users with transparency on when the Perl script will be finished running, I implemented a JavaScript countdown t ...
I have been working on integrating Bloodhound.js into an Angular 2 project that utilizes Angular 2 CLI. Currently, I have successfully implemented jQuery by following these steps: Installed jQuery using npm install jquery --save Installed jQuery Type ...
I have a simple code example available on codepen, but here is the markup for convenience: <div class="container my-container"> <div class="row m-row justify-content-between"> <div class="col-2 my-col">One of three columns</div& ...
Struggling to load content from other pages into a specific div by clicking on a URL link? Despite having previously executed the code successfully, it seems to redirect to the linked page instead of loading in the desired div. Even with an alarm set up as ...
I'm developing an Ionic 4 app with Angular and looking to incorporate Up and Down Arrow buttons for vertical scrolling from top to bottom and vice versa. ...