Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 26, 2020 at 1:53 pm #1198018
    Vangone

    Hello Guys,

    I found a few solutions to change the header background-color on Scroll. But there is always a shrinking header set.
    I dont want and I dont have a shrinked header, but I want to change the Color.

    At the Moment I set my Background-color with

    #header #header_main{
    width: 100%;
    max-width: none;
	background-color: rgba(0,0,0,0.5);

    On Scroll I want the change the Color to:

    background-color: rgba(0,0,0,0.2);

    Thanks for the Help and Regards

    March 27, 2020 at 6:15 am #1198228
    Rikard

    Hey Vangone,

    Thanks for the details. I can’t see your header shrinking on my end though, I’m guessing that you managed to find a solution?

    Best regards,
    Rikard

    March 27, 2020 at 1:11 pm #1198322
    Vangone

    Hello,

    no we didnt find the solution, we just changed the header back to what we want it to be, but toe Background-color when I scroll, is still not what I want it to be.

    Regards

    March 27, 2020 at 6:02 pm #1198389
    Guenni007

    because you have no shrinking header you can use a little scroll event to have that .
    Then: is it realy the header that is your selector. On most cases the header_bg will do that. Because i do not see your staging site – it is hard to say something concrete.
    Try: ( and adjust the 50px offset to your needs and the colors)
    This will come to your child-theme functions.php:

    function header_background_change(){
?>
 <script>
(function($) {
    $(".header_bg").css("background-color", "green");  // see else setting - just to have the right start when no scroll has happend
    $(document).ready(function(){
      $(window).scroll(function() { 
        if ($(document).scrollTop() > 50) { // your wanted scroll distance 
          $(".header_bg").css("background-color", "red");
        } else {
          $(".header_bg").css("background-color", "green"); 
        }
      });
    });
})(jQuery);
 </script>
<?php
}
add_action('wp_footer', 'header_background_change');
    March 27, 2020 at 7:15 pm #1198402
    Yigit

    Hi,


    @Guenni007     Thanks for your help :)

    Best regards,
    Yigit

    March 2, 2023 at 6:37 pm #1399874
    WebbR

    Hi there, I tryed this and it does absolutley nothing. Do you have an idea for what reason?
    Would realy like to have such a function.

    Best regards and enjoy yourday!

    March 3, 2023 at 9:04 am #1399950
    Ismael

    Hi,

    Where did you add the script? We tried to login to the dashboard but the account info above seems to be invalid. Please check the login credentials or provide another admin account.

    Best regards,
    Ismael

    March 7, 2023 at 5:38 pm #1400377
    WebbR

    Hey Ismael, thx for asking – got the script working. The effect was hidden by #header_main witch was backtground #fff

    THX!

    March 7, 2023 at 7:16 pm #1400388
    Guenni007

    and think of the time when this is posted – some events are deprecated now – so maybe it has to be now: $(window).on( 'scroll' ,function() {
    sometimes it is better to have : .bind('scroll', function() {

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.