Цвет текста изменяется в цвет фона

Question

Цвет текста изменяется в цвет фона

0

У меня есть участки сайта с темными изображениями, а затем с другими панелями белого цвета. В фиксированном положении в верхнем левом углу есть несколько простых точек навигации, которые пользователь может щелкнуть, чтобы перемещаться по сайту. Однако, конечно, эти точки становятся невидимыми при прокрутке на белом фоне.

Ссылка на сайт dev находится здесь: http://dev.matthewbugeja.com/

Мой вопрос: возможно ли, чтобы эти цифры менялись на черный, когда на белых участках сайта, а затем возвращались обратно к белому, когда на более темных участках? Заранее благодарим за любые ответы.

Matt22 28 апр. 2014, в 12:24

Источник

0

Да, это возможно. Пожалуйста, поделитесь соответствующим кодом.
Milind Anantwar 28 апр. 2014, в 09:49
0

Я не собираюсь посещать сайт разработчика
Satpal 28 апр. 2014, в 09:52
0

cube3x.com/...
4dgaurav 28 апр. 2014, в 09:58
0

Простым решением было бы добавить темную рамку вокруг белых точек. На темном фоне эта темная граница будет невидимой. На светлом фоне точки будут видны из-за темной границы вокруг них.
theHarsh 28 апр. 2014, в 10:22

Показать ещё 2 комментария

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Да, это возможно. Пожалуйста, поделитесь соответствующим кодом.
Я не собираюсь посещать сайт разработчика
Простым решением было бы добавить темную рамку вокруг белых точек. На темном фоне эта темная граница будет невидимой. На светлом фоне точки будут видны из-за темной границы вокруг них.

melwyn pawar · Answer 1 · 2014-04-28T07-10-00.000Z

вы можете внести изменения цвета в точки, проверив значение прокрутки окна, например, проверьте код ниже

$(window).scroll(function () {
    if ($(window).scrollTop() > 500) {

        $("#nav ul li a").css("color", "#000000");

    } 
})

Обратите внимание, что значение 500 является примером здесь, у вас могут быть разные проверки значений прокрутки.

Если вы не хотите использовать сценарии, вы можете изменить внешний вид точек, добавив следующий код CSS #nav ul li a {text-shadow: 1px 1px 2px # 000; -webkit-text-stroke: 1px # d7d7d7; }
JQuery, который вы перечислили, прекрасно работает! Однако это не учитывает изменение размера окна. Таким образом, я мог бы установить правильное значение для одного размера окна, но как только я уменьшу или увеличу его, значение будет неточным для позиции, которую мне нужно изменить на странице. Есть ли обходной путь для этого?
Я просто дважды проверим размер окна, а вы уже подумали об изменении CSS, добавив следующее: #nav ul li a {text-shadow: 1px 1px 2px # 000; -webkit-text-stroke: 1px # d7d7d7; }