Introduction

In WordPress, the header image refers to the image that appears at the top of your website, usually at the top of each page. The method of managing and customizing the header image can vary depending on the theme you are using. If you want to make the header image fixed during scrolling in WordPress, you can achieve this effect using a combination of HTML, CSS, and JavaScript. Here’s a general guide on how you might implement a fixed header image during scrolling:

Remember to back up your theme or use a child theme before making any direct modifications to your theme files to avoid losing changes during theme updates.

Always test your changes on a staging site before applying them to your live site, and check your theme documentation for specific guidance related to fixed or sticky headers.

header image fixed

Step 1. Make HTML structure with header image:

Lets assume that the header image HTML structure is made as given below and written in header.php

<section class="banner-author">

    <div class="banner-author-holder" >
        <div class="img-holder custom-header <?php if (!has_header_video()) : echo 'no-video'; else: echo 'yes-video'; 
       endif;?>" style="background-image: url(<?php  if (!has_header_video()) :echo esc_url(get_header_image()); 
       endif?>)" >
            <?php 
            if (has_header_video()) : ?>
            <div class="custom-header-media">
                <?php the_custom_header_markup(); ?>
            </div>
            <?php endif ;
                ?>    
            <div class="banner-author-info <?php  if (has_header_video()) : echo 'has_video'; endif; ?>">                
                            
                    <?php if (is_front_page() || is_home() ) :
                            $theme_name_description = get_bloginfo('description', 'display'); 
                            if ($theme_name_description || is_customize_preview() ) :
                                ?>
                            <p class="site-description" ><?php echo esc_html($theme_name_description); ?></p>
                            <?php endif; ?>
                            <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
                    <?php endif; ?>
            </div>
        </div>
                
    </div>

</section>

Step 2. Make CSS to support above HTML structure including header image

Mention following css in style.css

/*banner author*/

.banner-author .img-holder {
  background-position: center top;
  /* background-attachment: scroll; */
  background-repeat: no-repeat;
  /* padding-top: 60%; */
  background-size: 100%;
  /* height: 55vw; */
}

.banner-author-holder {
  position: relative;
  overflow: hidden;
  z-index: 0;
  /* height: 55vw; */
}


.banner-author .img-holder {
  animation-name: header-image-scale;
  animation-duration: 2s;
}

@keyframes header-image-scale {
  from {
    transform: scale(.7, .7)
  }

  to {
    transform: scale(1, 1)
  }
}

.introduction-holder-right {
  /* content: ""; */
  position: relative;
  /* width: 0; */
  height: 0;
  bottom: -15vw;
  left: 0;
  right: 0;
  border-top: 7vw solid transparent;
  border-left: 70vw solid #dd3333;
  border-bottom: 0px solid transparent;
}

.introduction-holder-left {
  /* content: ""; */
  position: relative;
  /* width: 0; */
  height: 0;
  bottom: -8vw;
  left: 0;
  right: 0;
  border-top: 7vw solid transparent;
  border-left: 70vw solid #dd3333;
  border-bottom: 0px solid transparent;
  transform: scaleX(-1);
}

.banner-author-holder .img-holder {
  text-align: center;
}

.banner-author-holder .img-holder button {
  color: white;
}

.banner-author-holder .img-holder button:hover {
  background-color: #000;
  transition: all 0.3s ease-in;
}

.banner-author-holder .img-holder.no-video:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* z-index: 2; */
}

.banner-author-info .logo {
  margin: 0 auto 20px auto;
}

.banner-author-info .logo img {
  max-width: 20vw;
}

.banner-author-holder .banner-author-info {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  max-width: 1440px;
  margin: 0 auto;
  transform: translateY(-35%);
  -webkit-transform: translateY(-35%);
  text-align: center;
  /* padding: 130px 0; */
}

.banner-author-holder .banner-author-info h1 a,
.banner-author-holder .banner-author-info p {
  color: #ffffff;
}

.site-title a,
.site-description {
  color: #000;
}

.banner-author-holder .banner-author-info h1 a {
  font-family: "Josefin Sans", sans-serif;
  font-size: 4vw;
  font-weight: 600;
  display: block;
}

.banner-author-holder .banner-author-info p {
  font-family: "Josefin Sans", sans-serif;
  font-size: 1.5vw;
}

.banner-author-holder .banner-author-info h1 {
  line-height: 1;
}

.banner-author-holder .banner-author-info h1 a {
  vertical-align: middle;
}

.banner-author-holder .banner-author-info h1 {
  margin: 2vw;
}

/*end banner author*/

Step 3. Make a jquery so that header image be fixed while scrolling

Need to have following JS as well in background-change.js

/**
 *  banner background made fixed after scroll to top and vice versa
 */
function isElementInViewport(el) {
    var elementTop = el.offset().top;
    var elementBottom = elementTop + el.outerHeight();
    var viewportTop = jQuery(window).scrollTop();
    var viewportBottom = viewportTop + jQuery(window).height();
    return elementBottom > viewportTop && elementTop < viewportBottom;
}

jQuery(window).on(
    'scroll', function () {
        var targetclass3 = jQuery('.banner-author');
        var divTop1 = jQuery('.banner-author').offset().top;
        if (jQuery(window).scrollTop() > divTop1) {
            if (targetclass3.length > 0) {
                if (isElementInViewport(targetclass3)) {
                    jQuery(".banner-author .img-holder").css({ "background-attachment": 'fixed' });

                } else {
                    jQuery(".banner-author .img-holder").css({ "background-attachment": 'scroll' });

                }
            }
        } else {
            jQuery(".banner-author .img-holder").css({ "background-attachment": 'scroll' });

        }
    }
);

Step 4. Enqueue above in WordPress file functon.php

Enqueue above file in WordPress function.php

 if (is_front_page() || is_home() ) {
        wp_enqueue_script('context-blog-background-js', get_template_directory_uri() . '/assets/js/background-change.js', array(), '1.0.0', true);
        
    }

Conclusion

You can have a example here Context Blog pro theme

If you are able to implement above codes in your theme, you will definitely make header image fixed during scrolling in WordPress without using any plugins. If need support then you can contact us. We will here to support you. Meanwhile you can see some of our cool free themes here.

Leave a Reply

Share via
Copy link