Change fixed heading on scrolling 600px - Responsive

Question

Hey there!
I've fixed a heading text for my image gallery and after scrolling some pictures, I want the heading text to get changed. I've done this in JavaScript but it is not responsive... i.e, after scrolling 600px on PC, heading text gets changed but I want the same change to be done in a responsive way...i.e, at 600px in PC and 2000px in phone view. Can anyone help me out please.
This is my JS code.....I want $('#text').html to get changed at 2000px in phone view and at 600px in PC view

$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 600) {
$('#text').html('Guard of Honour');
} else {
$('#text').html('Drills');
}
});
});

Answer 1

I would run a check to see if the user is using mobile or PC. That way, you could change the value for your scrollposition depending on the device that is being used. You can check this by using a simple if-statement.

See this thread for how to check if user is on mobile:
https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device

Answer 2

You're welcome.

Answer 3

Roolin Thankyou very much

Answer 4

I also found an other way for doing it........ Multiplying my pixel value with the pixel ratio of the device.
Thanks to Prometheus 🇸🇬 for the link!
https://www.tutorialrepublic.com/faq/how-to-detect-screen-resolution-with-javascript.php