Problem beim Zuweisen von Hintergrundfarbe auf Bildlauf

Question

Ich versuche, das Design meiner Hamburger Navigation zu ändern, während der Benutzer scrollt. Ich glaube, ich gekommen bin halb schließen https://jsfiddle.net/g95kk7yh/6/

$(document).ready(function(){  
     var scroll_pos = 0; 
     $(document).scroll(function() { 
      scroll_pos = $(this).scrollTop(); 
      if(scroll_pos > 10) { 
       $(".navigation").css('background', 'rgba(255, 0, 0, 0.5)'); 
       $(".navigation span").css('background', '#bdccd4'); 
      } else { 
       $(".navigation").css('background', 'transparent'); 
       $(".navigation span").css('background', '#fff'); 
      } 
     }); 
    }); 

Hier ist, was ich versuche

Das Hauptproblem zu erreichen ich habe, ist die richtige Breite und Höhe der roten Zuordnung ohne das Navigationsmenü als Ganzes neu zu positionieren.

Auch ist es möglich, nur diese Änderungen bei 600px und darunter zu haben (wie Sie sehen können, wenn das Hamburger-Menü zeigt).

Answer 1

Ich habe @potatopeelings Beitrag verwendet und einige Zeilen geändert und hinzugefügt.

.myClass { 
    margin-right: -25px; 
    width: 85px; 
    height: 85px; 
    background-color: rgba(255, 0, 0, 0.5); 
} 

Fiddle: https://jsfiddle.net/moj7z2b4/2/

Answer 2

Dies deckt nur den zweiten Teil der Frage (Danke @Webeno und @MarcusPorter für das Abfangen). Eine Antwort, die beide Teile der Frage abdeckt, finden Sie unter 7urkm3n's solution.

Anstatt die CSS-Eigenschaften in Ihrem Skript zu ändern, fügen Sie einfach eine Klasse hinzu, die die benötigten Eigenschaften aufweist.

... 
if(scroll_pos > 10) { 
    $(".navigation").addClass('myClass') 
} else { 
    $(".navigation").removeClass('myClass') 
} 
... 

wickeln Sie dann Ihre Klasse CSS-Regeln mit

@media screen and (max-width: 600px) { 
    .myClass { 
     ... 
    } 

    .myClass span { 
     ... 
    } 
} 

so dass diese Regeln nur auf Größe Bildschirm anwenden < 600px

---

Fiddle - https://jsfiddle.net/moj7z2b4/

Answer 3

ich über gekommen sind Dieses Problem war auch, als ich den "preloader" -Th erstellt habe für meine Website. Wie auch immer, die Art, wie ich mein Problem gelöst habe, war, background-color mit backgroundColor zu ändern. Stellen Sie sicher, backgroundColor ist nicht in Anführungszeichen, geben Sie es einfach in, wie Sie mit einer Variablen oder einer Funktion tun würde, usw.

Von jQuery API Docs:

Auch jQuery können ebenso interpretieren die CSS und DOM Formatierung von Mehrworteigenschaften. Beispielsweise versteht und gibt jQuery den korrekten Wert für .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }) und .css({backgroundColor: "#ffe", borderLeft: "5px solid #ccc" }) zurück. Beachten Sie, dass bei der DOM-Notation die Anführungszeichen um die Eigenschaftsnamen optional sind, aber bei der CSS-Notation aufgrund des Bindestrichs im Namen erforderlich sind.

Dieser Code sollte Arbeit, aber ich kann es nicht getestet haben. Ich habe Ihre .css('property', 'value') in .css({'property': 'value' geändert});

$(document).ready(function() { 
    var scroll_pos = 0; 
    $(document).scroll(function() { 
    scroll_pos = $(this).scrollTop(); 
    if (scroll_pos > 10) { 
     $(".navigation").css({ 
     backgroundColor: 'rgba(255, 0, 0, 0.5)' 
     }); 
     $(".navigation span").css({ 
     'background': '#bdccd4' 
     }); 
    } else { 
     $(".navigation").css({ 
     backgroundColor: 'transparent' 
     }); 
     $(".navigation span").css({ 
     'background': '#fff' 
     }); 
    } 
    }); 
});