채택완료

제이쿼리 질문합니다.

2021-10-08 (금) 10:02:10 2,774

스크롤 내릴 시에 border에 linear-gradient 속성을 추가하고 싶습니다.

<script>
    $(document).ready(function(){
      $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll > 0) {
          $("#hd").css("background" , "#fff");
          $("#hd").css("border-width" , "4px"); 
          $("#hd").css("border-style" , "solid"); 
          $("#hd").css("border-imager" , "linearGradient(to right, #c0d940, #00a3e4)"); 
          $("#hd").css("border-right" , "none"); 
          $("#hd").css("border-left" , "none"); 
          $("#hd").css("border-top" , "none");
        }
        else{
          $("#hd").css("background" , "none"); 
        }
      })
    })
</script>

linearGradient 속성이 안 먹어서 검정색 boder가 출력이 되는데 해결할 수 있는 방법이 없을까요?

|

답변 1개 / 댓글 1개

채택된 답변
+20 포인트
Copy
<script>
    $(document).ready(function(){
      $(window).scroll(function(){
        var scroll = $(window).scrollTop();
        if (scroll > 0) {
          $("#hd").addClass('on');
        }
        else{
          $("#hd").removeClass('on');
        }
      })
    })
</script>

이런식으로 클래스를 주고, CSS에서 처리하는게 더 편하실거같습니다. 

답변에 대한 댓글 1개

오 감사합니다!

답변을 작성하려면 로그인이 필요합니다.