שני סקריפטים JS שמתנגשים

מוטי מן

כשהראשון נמצא לבד, הוא עובד חלק, וכשאני שם את השני, הראשון מפסיק לעבוד ורק השני עובד. יש שם איזה קטע שמריח לי שהוא הבעייתי, אבל אני לא מספיק מבין בתחביר JS כדי לדעת. תודה!

הראשון. הצמדה של שורת הכותרת.

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

השני. לחצן גלול למעלה.

var mybutton = document.getElementById("myBtn");

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

יוסף בן שמעון

@מוטי-מן השורה הזו

window.onscroll = function() {scrollFunction()};

אומרת שהאירוע של הגלילה יפעיל את הפונקציה scrollFunction
וזו

window.onscroll = function() {myFunction()};

אומרת שהוא יפעיל את הפונקציה myFunction
אז אחד מהם דורס את השני.
מה שאפשר לעשות, שהפונקציה האנונימית תקרא לשני הפונקציות הנ"ל

window.onscroll = function() {myFunction(); scrollFunction()};

chv

@מוטי-מן זה מפוצל לשני חלקים בכוונה?
בנוגע לבעיה בקוד שלך - היא פשוטה, כיוון שקראת לפונקציות פעמיים כלומר בעצם התייחסת בקוד פעמיים לאירוע של window.onscroll - האירוע הראשון נדרס אוטומטית (למה הראשון ולא השני? ככה זה בגלל צורת העבודה של JS, גגל את זה).
אפשר פשוט לקרוא לכמה פונקציות שאתה רוצה בפעם אחת, זה יהיה בערך ככה:

window.onscroll = function() {
  myFunction(); 
  scrollFunction();
};

var header = document.getElementById("myHeader");
var mybutton = document.getElementById("myBtn");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

function scrollFunction() {
  if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

נ.ב. אני מבין שבHTML עצמו כתבת לכפתור עם ה-id בשם "myBtn" תכונה כזו - "()onclick="topFunction

עריכה - שניה אחרי שהעליתי את הפוסט ראיתי ש @יוסף-בן-שמעון כבר כתב לך, ויותר ברור..

מוטי מן

@יוסף-בן-שמעון אמר בשני סקריפטים JS שמתנגשים:

מה שאפשר לעשות, שהפונקציה האנונימית תקרא לשני הפונקציות הנ"ל
window.onscroll = function() {myFunction(); scrollFunction()};

@יוסף-בן-שמעון תודה על ההסבר, לא חשבתי שיש בעיה לעשות שאירוע אחד יקרא לכמה פונקציות בשני משפטים.
@chv זה מפוצל בכוונה, זה שני קבצי js נפרדים. (עכשיו כבר לא כ"כ )

yossiz

@יוסף-בן-שמעון אמר בשני סקריפטים JS שמתנגשים:

אז אחד מהם דורס את השני.
מה שאפשר לעשות, שהפונקציה האנונימית תקרא לשני הפונקציות הנ"ל

אפשר גם (מומלץ) להשתמש ב-addEventListener שלא דורס.

window.addEventListener('scroll', myFunction);

אגב, זה מיותר לעטוף את הפונקציה בעוד פונקציה:

window.onscroll = function() {myFunction()};

כותבים פשוט:

window.onscroll = myFunction;