2017-02-17 2 views
0

У меня есть CSS сказатьизменяющего psudo классы с JQuery с

div.borderYtoX a:before, 
div.borderYtoX a:after { 
    position: absolute; 
    opacity: 0.5; 
    height: 100%; 
    width: 2px; 
    content: ''; 
    background: #FFF; 
    transition: all 0.3s; 
} 

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

$(document).ready(function(){ 
    var scroll_start = 0; 
    var startchange = $('#startchange'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $('.header').css('background-color', 'rgb(255,255,255)'); 
      $('div.container a').css('color', '#063193'); 
      $('.borderYtoX a:before, .borderYtoX a:after').css('background', '#063193'); 
     } else { 
      $('.header').css('background-color', 'rgba(255,255,255,0.3)'); 
      $('div.container a').css('color', '#fff'); 
      $('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff'); 
     } 
    }); 
}); 
+0

Создайте фрагмент кода, его поможет понять проблему и дать идеальное решение. –

+0

Нет, вы не можете нацелиться на «псевдо». Вы не можете манипулировать ': after' или': before', потому что он не является технически частью 'DOM' и поэтому недоступен для любых' JavaScript' или 'jQuery'. Но вы можете добавить новый класс с новыми параметрами ': after' или': before'. См. Это [** SOAnswer **] (http://stackoverflow.com/a/17789110/4763084) – vivekkupadhyay

+0

Возможный дубликат [Доступ к css »: после« селектор с jQuery »(http://stackoverflow.com/questions/17788990/доступа заместитель CSS-после-селектор-с-JQuery) – vivekkupadhyay

ответ

2

Вы не можете получить доступ к псевдоэлементам с помощью javascript, поскольку они фактически не существуют в DOM. Если вы хотите, чтобы манипулировать им использовать Jquery, чтобы применить класс переопределения к элементу и добавить CSS переопределение для этого нового класса

CSS

div.borderYtoX a.active:before, 
div.borderYtoX a.active:after { 

    background: #063193; 
} 

Script

$(document).ready(function(){ 
    var scroll_start = 0; 
    var startchange = $('#startchange'); 
    var offset = startchange.offset(); 
    $(document).scroll(function() { 
     scroll_start = $(this).scrollTop(); 
     if(scroll_start > offset.top) { 
      $('.header').css('background-color', 'rgb(255,255,255)'); 
      $('div.container a').css('color', '#063193'); 
      $('.borderYtoX a, .borderYtoX a').toggleClass('active'); 
     } else { 
      $('.header').css('background-color', 'rgba(255,255,255,0.3)'); 
      $('div.container a').css('color', '#fff'); 
      $('div.borderYtoX a:before, div.borderYtoX a:after').css('background', '#fff'); 
     } 
    }); 
}); 
Смежные вопросы