通过第一部分后使导航文本颜色发生变化

发布于 2025-01-14 13:01:42 字数 725 浏览 2 评论 0原文

我一直在尝试找出如何更改导航中的字体颜色，以便在滚动经过蓝色部分进入橙色部分后进行更改。

https://tom-odell-v2.vercel.app/

这个是我正在使用的 javascript，但问题是滚动点根据屏幕尺寸而不同，我需要一些能够响应移动样式的东西。

$(document).ready(function(){       
var scroll_pos = 0;
$(document).scroll(function() { 
    scroll_pos = $(this).scrollTop();
    if(scroll_pos > 750) {
        $('.change').css('color', '#244093');
    } else {
        $('.change').css('color', '#ffbd75');
    }
}); });

我不太擅长 jquery/javacript，希望得到一些帮助或资源！

原文

I've been trying to figure out how to change the font colour in my nav to change after scrolling past the blue section into the orange section.

https://tom-odell-v2.vercel.app/

This is what I'm working with for my javascript but the issue is that the scroll point is different depending on the screen size and I need something that is going to be responsive to mobile styling.

$(document).ready(function(){       
var scroll_pos = 0;
$(document).scroll(function() { 
    scroll_pos = $(this).scrollTop();
    if(scroll_pos > 750) {
        $('.change').css('color', '#244093');
    } else {
        $('.change').css('color', '#ffbd75');
    }
}); });

I'm not very good with jquery/javacript and would appreciate some assistance or resources!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

离鸿 2025-01-21 13:01:42

使用您正在尝试的相同方法，您可以添加多个 if 语句来实现此目的。检查下面的代码片段。
您可以使用交叉路口观察器来执行此操作。

window.onload = function(){
let homePage = document.querySelector("#homepage");
window.onscroll = function () {
       
        var pos = window.pageYOffset;
        if(pos<300){
        homePage.style.color = "red";
        }
        if (pos > 300 && pos<400) {
         homePage.style.color = "blue";
        }
        if(pos>600){
            homePage.style.color = "green";
        }
}

}

nav{
position:sticky;
top:0;
}
nav a{
color:red;
}

<nav>
<a href="#" id="homepage">Home Page</a>

</nav>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p><p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p><p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>

using the same method you are trying, you can add multiple if statements to achieve this. Check the code snippet below.
You can do this using intersection observer.

window.onload = function(){
let homePage = document.querySelector("#homepage");
window.onscroll = function () {
       
        var pos = window.pageYOffset;
        if(pos<300){
        homePage.style.color = "red";
        }
        if (pos > 300 && pos<400) {
         homePage.style.color = "blue";
        }
        if(pos>600){
            homePage.style.color = "green";
        }
}

}

nav{
position:sticky;
top:0;
}
nav a{
color:red;
}

<nav>
<a href="#" id="homepage">Home Page</a>

</nav>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p><p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>
<p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p><p>
fixture can be a string path (or array of those), or object (or array of those) that represents your local fixture file and contains following properties:

{string} filePath - file path (with extension)
{string} fileName - the name of the file to be attached, this allows to override the name provided by filePath
{Blob} fileContent - the binary content of the file to be attached
{string} mimeType - file MIME type. By default, it gets resolved automatically based on file extension. Learn more about mime
{string} encoding - normally cy.fixture resolves encoding automatically, but in case it cannot be determined you can provide it manually. For a list of allowed encodings, see here
{number} lastModified - The unix timestamp of the lastModified value for the file. Defaults to current time. Can be generated from new Date().getTime() or Date.now()
</p>

回复收藏 0 原文

~没有更多了~