Is it possible to have a search bar that appears on the header when scrolling, similar to the one featured on this website:
Is it possible to have a search bar that appears on the header when scrolling, similar to the one featured on this website:
Method 1 - An efficient way to achieve this is by detecting a scroll event and toggling a class that includes display: none;
You can utilize an event listener -
window.addEventListener('scroll', function() {
if( window.scrollY !== 0) {
document.getElementById('searchBar').classList.add('scrolled');
} else {
document.getElementById('searchBar').classList.remove('scrolled');
}
});
Using the following CSS -
.noScroll
{
background: yellow;
position:fixed;
height: 50px; /*Adjust as needed*/
width: 100%; /*Adjust as needed*/
top:0;
left:0;
display:none;
}
/*Apply this class for content to be displayed after scrolling*/
.scrolled
{
display: block !important;
}
.parent {
/* Ensure parent container is scrollable */
height: 200vh;
}
The HTML implementation would look like -
<div class="parent">
<div class ='noScroll' id='searchBar'>Content to reveal on scroll</div>
</div>
JSFiddle DEMO here - https://jsfiddle.net/kecnrh3g/
Method 2 - Another approach would involve
<script>
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById('searchBar').style.top = '-50px';
} else {
document.getElementById('searchBar').style.top = '0';
}
prevScrollpos = currentScrollPos;
}
</script>
Corresponding HTML code -
<div class="parent">
<div id ='searchBar'>Content to reveal on scroll</div>
</div>
and associated CSS styling
#searchBar {
background: yellow;
position: fixed;
top: 0;
left: 0;
height: 50px;
width: 100%;
display: block;
transition: top 0.3s;
}
.parent {
height: 200vh;
}
See the JSFiddle example here - https://jsfiddle.net/0tkedcns/1/
In a similar scenario, the concept revolves around displaying or hiding content once the user scrolls on the page. This can be achieved using inline CSS and manipulating the display property. Feel free to share your code so we can assist you further!
HTML
<div class="search-bar">
<div class="sticky-search">
Sticky Search: <input type="text" value="search" />
</div>
</div>
CSS
.sticky-search {
display:none;
position:fixed;
top:0px;
left:0px;
right:0px;
background:blue;
padding:10px;
}
JS
var searchHeight = $(".search-bar").outerHeight();
var offset = $(".search-bar").offset().top;
var totalHeight = searchHeight + offset;
console.log(totalHeight);
$(window).scroll(function(){
if($(document).scrollTop() >= totalHeight) {
$('.sticky-search').show();
} else {
$('.sticky-search').hide();
}
});
When using ChartJS v2.6 to create a pieChart within a Bootstrap Grid, everything appears correctly in Chrome and Firefox, but not in Internet Explorer. In IE, the chart is unintentionally stretched on larger screens. Bootstrap should handle the sizing, but ...
I have searched through various questions and the Bootstrap documentation but haven't been able to determine the purpose of these classes on elements. Any assistance would be greatly appreciated! My goal is to adjust my search bar's size to 1/4th ...
Despite the numerous StackOverflow questions on this topic, I have gone through many of them without success. Now, I am reaching out with my own question. My objective is to save an image from an HTML5 <canvas> on my webpage to a file on my server u ...
Whenever I attempt to display a modal using Bootstrap, it mysteriously appears upon page refresh but fails to show up when the button is clicked. Ideally, I want the modal to only appear when the user clicks on the button. The structure of my html file lo ...
This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...
While working on a layout featuring a left-sided nav-bar menu, I encountered an odd blank space between the navbar and the main content area. Can anyone shed light on why this space appears and how to eliminate it? For reference, here is the code snippet: ...
Inside a div, I have 2 spans. When the content of the first span is short enough to fit on one line, the span's width matches the text content and positions the second span next to it. If the content of the first span is long and causes it to wrap, t ...
Can someone help me with this issue? I'm trying to use jQuery to hide the div element with the ID 'professional-panel' when a button with the ID 'hideButton' is clicked. I know it should be simple, but I'm new to jQuery and s ...
Does anyone know how to remove the like button on top of the 'Like box' Facebook plugin using JQuery? I have imported the like box from Facebook and I want to eliminate this like button, but Facebook does not allow me to do so. Therefore, I am t ...
I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with: if (scrnwidth <= 761) { if (display was block) { //Defaultly testi has display:none property. testi = m ...
When it comes to security reasons, doing it directly may not be feasible. Nevertheless, there are rumors circulating about certain image-hosting platforms that permit the use of their images in a comparable way (could Google Picasa be one?). I might be mis ...
So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...
Consider this scenario: We are tasked with fetching an image from an S3 bucket. <img src="https://s3-us-west-2.amazonaws.com/{BUCKET}/logo.png" /> Due to limited internet connectivity, I must find a way within my Express server to redirect requests ...
I'm trying to print an html form within my Angular7 App with minimal margins. I've attempted different solutions such as adjusting the margins manually in Chrome's print preview box and adding @media print styles & @page styles in both the c ...
I found a solution, but it's specifically for Nuxt.js and I'm using the Vue CLI. Is there any way to use dart sass instead of node-sass (default for sass-loader) in Nuxt.js? While the Vue CLI official documentation displays an example utilizing ...
Encountered an issue with the Brightcove HTML5 video embedded on my website showing a black screen when clicked to play. The video plays sporadically and only on Android Devices (testing on KitKat only). In instances where it doesn't work, the templa ...
I am currently facing an issue with a facebook like button placed in the caption section of a slideshow div, located at the far bottom right corner. The problem arises when the 'post to wall' prompt pops up below the like button, but is cut off d ...
I am currently working on a sliding menu with jQuery and the bounce jQuery UI effect. The issue I am encountering is that the hover event does not trigger when I hover over the first li element. Here is the snippet of my JavaScript code: $(document).ready ...
On my website, I have a position:fixed <div> that appears in the center of the screen. Whenever there are messages, a second position:fixed <div> is displayed next to the first one. I've noticed that on various screen sizes, like a netbo ...
I am currently working on a basic website and I'm looking to incorporate Google Search functionality into it. I've managed to create a simple search box that redirects users to the Google Search Results page when they input their query. However, ...