JQuery magic: A shrinking header that changes size as you scroll

There have been countless inquiries regarding how to animate a header to shrink as the page is scrolled down. While I have some understanding of the responses to similar questions, I find my case to be rather complex. The header on my page takes up too much space when it's in a static or fixed position. It consists of a pre-header with social media links, a small address, and a log-in button, a title-header containing the logo image along with the business name and motto, and finally the navigation menu. All of this is wrapped in a div with their corresponding sub-divs. I have used Bootstrap as a template for the menu navigation. My goal is to make the pre-header and logo image disappear when scrolling down, leaving only the title, name, motto, and navigation menu visible. Here's a snippet of the code:

The CSS code is quite lengthy and can be confusing as it contains styles for other pages in the same project. Any suggestions or recommendations on how to achieve the desired effect would be greatly appreciated.


                    html {
                        background-color: #fff;
                    }

                    body {
                        margin: 0;
                        padding: 0;
                        background-color: #f6f6f6 !important;
                    }

                    .container {
                        max-width: 985px;
                        margin: 0 auto;
                    }

                    ...
                    (CSS styles continue)
                    ...
                
            

Answer №1

   $(window).scroll(function(){
          var scrolltop = $(this).scrollTop();
           if(scrolltop >=100){
                $('#pre-header,#id-of-your-logo').css('display','none');
           }
           else{
                $('#pre-header,#id-of-your-logo').css('display','block');
           }

I trust this solution will be beneficial to you.

Answer №2

Are you interested in this content?

I recently implemented JavaScript here. Now, as you scroll down, the headermenu receives an additional class called shrink. This class triggers a CSS rule to hide the preheader and LogoSchool.

$(document).on("scroll", function() {
  if ($(document).scrollTop() > 100) {
    $(".headermenu").addClass("shrink");
  } else {
    $(".headermenu").removeClass("shrink");
  }
});
html {
  background-color: #fff;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f6f6f6 !important;
}

.container {
  max-width: 985px;
  margin: 0 auto;
}

#LogoSchool {
  display: inline-block;
  width: 75%;
  height: auto;
}

/* Rest of the CSS code is included here */

@media screen and (max-width: 767px) {
  section table.table {
    width: 90%;
    margin: 15px auto;
  }
}

/* Events Calendar styling begins here */

.container .calendar-table {
  margin: 10px auto;
}

.container .calendar-table thead th.calendarheader,
.container .calendar-table thead th.nobackgroundcolor {
  font-size: 15px;
  background-color: #b2cef280;
}

.container .calendar-table thead th a.month-title {
  font-size: 22px;
  font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
  color: #000;
}

.container .programbody ul {
  list-style: square;
}

/* Additional content for Contacts and Footer is included here */

Answer №3

Enhance your Bootstrap navbar with scroll animation: http://codepen.io/davidtmiller/pen/yepJoX As you scroll, the navbar transitions to the .affix class and you can easily hide the preheader.

.navbar-default.affix #preheader{
   display: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Manipulating data using jquery to organize the structure of an HTML document

I am in the process of parsing this JSON data and extracting all the information from it. I am not very experienced with parsing JSON, so any help would be greatly appreciated. http://jsfiddle.net/NJMyD/1044/ html <div class="items"> <di ...

Transform static borders into mesmerizing animations by changing the solid lines to dotted lines using CSS

I've managed to create a circle animation that is working well, but now I'm looking to switch from solid lines to dotted lines. Can anyone provide guidance on how to accomplish this? Here is the current appearance: #loading { width: 50px; ...

Can jQuery Autocomplete function without stopping at white spaces?

Is there a way to modify jQuery UI autocomplete so that it can handle multiple words instead of terminating with a space? For example, if you input "New York City", it should still filter results based on each word. $.ajax({ type: "GET" ...

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

FTP upload is failing to transfer the audio file programmatically

I am having an issue with uploading an .mp3 file using FTP code in C#. The file is uploaded successfully to the server, but when I try to bind it to a simple audio control or view it directly in a browser, it does not function as expected. Interestingly, m ...

How can I select elements in CSS that are "between x and y"?

If I have an HTML table with 20 rows and 3 columns (20x3), I am looking to highlight the rows from 7 to 12 in red. What CSS selector should I use for this specific task? How can I define the range of rows to be styled as "between"? ...

Tips for incorporating Javascript in an innerHTML inline css situation

I'm just starting to learn about html5 and php. I'm curious about how to incorporate javascript into my existing code. Currently, I have data from a database displayed in an HTML table. My goal is to align the output of the last cell more toward ...

What is the best way to position a search icon on the right side using CSS?

I am trying to figure out how to display a search icon image on the right side using CSS, but so far I have been unsuccessful. Here is the code that I have: The CSS code: .search { background: url(../images/icons/search.png) no-repeat; display:in ...

Utilizing a jQuery plugin or function with customizable options when adding elements dynamically

jQuery offers a useful feature where you can use $(document).on(...) to apply an event to newly added elements in the HTML, such as after an Ajax request. Can you provide an example of how to use this with a custom function/plugin like hoverpulse? Anothe ...

When the function $(document).width() is called, it may yield varying results depending on the timing of the call

Every time I use $(document).width(); within $(window).load(function(){}) or $(document).ready(function(){}), the result differs from when it is called inside $(window).resize(function(){}). The discrepancy is approximately 100px, and it's not due to ...

Using JavaScript and jQuery, apply a class when a specific radio button is checked and the data attribute meets certain criteria

Need help with changing explanation color based on correct answer selection in multiple choice question. Currently, all choices turn green instead of just the selected correct one. Any assistance is welcome, thank you. html <li class='test-questi ...

When a user clicks on the div, it expands in size and then returns to

I developed a small quiz, where clicking on an answer moves the checkmark to the clicked div. const answers = document.getElementsByClassName('answer'); [].forEach.call(answers, function(answer) { $(answer).click(function() { if (!answer ...

CSS: Continuous Automated Slide Transitions

What CSS code do I need to incorporate into my code to create a continuous Slider Animation? I want the pictures to slide automatically one by one, with a specified time interval between each slide when not on hover. The hover function is already included ...

Tips for aligning a text box field in the center using Bootstrap

I'm having trouble centering a text field on my screen. No matter what I try, it stays aligned to the left. How can I fix this and get it centered? <div class="form-row"> <div class="col-md-4 col-md-offset-4"> ...

Bootstrap triggering unexpected behavior in navbar styles

As I delve into the world of HTML, CSS, and JS, I encountered a peculiar error while using Bootstrap that seems to be affecting the links in my navigation bar. Here's the CSS I've been using: https://pastebin.com/naVZuzaG And here's the co ...

Checkbox Hierarchy: Children marked as either Checked or Unchecked based on parent selection

Hello, I have a form that contains nested checkboxes on three levels. Using jQuery, I am trying to check/uncheck all the children when I check a parent level... and if any of the children are unchecked, uncheck the parent as well. I have attempted this m ...

What is the best way to transfer the value of one directive attribute to another directive in AngularJS?

For instance: <custom-main> <custom-sub1 att-name="test"></custom-sub1> <custom-sub2></custom-sub2> </custom-main> JavaScript Source Code bosAppModule.directive('custom-main',[&apos ...

Instructions on setting a photo as a background image using a text-based model

I'm a beginner with Angular so I may have a simple question. I am using an image from the Google API, which is not a URL. How can I set this image as the background-image in a CSS tag that only accepts URIs? Thank you! ...

In search of an effortless solution to fetch the hostname, computer name, and IPV6 address utilizing ASP or VB6

In search of an effortless method to retrieve the computer name, host name, and ipv6 ipaddress using vb6, asp, or jQuery. The primary motivation for this task is to ensure comprehensive logging of crucial security information. ...

Get rid of the add to cart message and modify the button that says "add to cart" on Woocommerce

How can I modify the shopping cart page to remove the "has been added to your cart" text and replace the quantity and add to cart button with a custom button (my image)? Here is an example of what I am trying to achieve: This is the current state of the p ...