Hiệu ứng cố định header khi cuộn trang bằng html css jquery | Unitop.vn

Поделиться
HTML-код
  • Опубликовано: 26 ноя 2024

Комментарии •

  • @hocwebdilam
    @hocwebdilam  3 года назад

    Bạn bấm đăng ký kênh để cập nhật những video mới trong những ngày tới!
    » Nhận tài liệu miễn phí: hocwebdilam.com?
    » Blog lập trình: unitop.com.vn
    » Đăng ký khoá học web đi làm: unitop.vn
    Chúc bạn học tốt!

  • @DenDenCover
    @DenDenCover 3 года назад

    rất dễ hiểu thầy ạ. Em tự code được rồi, ngoài ra em cũng học được cách thay đổi nhiều properties css từ một tag

  • @duyanhao4984
    @duyanhao4984 3 года назад +2

    Tuyệt vời.hi vọng thầy ra video hướng dẫn làm dự án thực tế web

    • @hocwebdilam
      @hocwebdilam  3 года назад

      Ok thank em. Chúc em học tốt!

  • @oanchithien9201
    @oanchithien9201 3 года назад +1

    Rất hay và thú vị. Cám ơn thầy đã chia sẽ

  • @hieptranminh6414
    @hieptranminh6414 3 года назад

    Rất thực tế và bổ ích ạ

    • @hocwebdilam
      @hocwebdilam  3 года назад

      Cám ơn em. Chúc em học tốt.

  • @nguyenvanchucfpltn6449
    @nguyenvanchucfpltn6449 2 года назад +1

    Quá đỉnh ah oi

  • @nuongphan8970
    @nuongphan8970 Год назад

    cảm ơn a nhều ạaaa

    • @hocwebdilam
      @hocwebdilam  Год назад

      OKi e. Nếu em muốn học bài bản được support đồng hành kèm cặp qua nhóm kín để đi làm em có thể ghé thăm unitop.vn tìm hiểu qua lộ trình nhé.

  • @bongbinh2k3
    @bongbinh2k3 Год назад +1

    Anh có video dạy về phân trang không ạ ?

    • @hocwebdilam
      @hocwebdilam  Год назад

      Chưa e nhé. Sắp tới có, e đk kênh theo dõi nhé.
      Còn muốn học php đi làm em xem thêm Php Master trên unitop.vn

  • @2002muzik
    @2002muzik 3 года назад +1

    Năm nhất đã học qua HTML, CSS có nên đăng kí để bổ sung kiến thức thêm kh thầy

    • @hocwebdilam
      @hocwebdilam  3 года назад

      Nhiều bạn học bài bản năm 2 kiếm được 3-7tr/tháng từ kỹ năng lập trình web rồi em.
      Học càng sớm càng ngon.
      E tham khảo lộ trình 10 bước tại đây unitop.vn

  • @tuo2223
    @tuo2223 3 года назад +1

    anh có thể ra video có backgroud tự động chuyển ảnh liên tục như các trang thế dới di động được không anh em thấy nó rất hay ấy ạ

    • @hocwebdilam
      @hocwebdilam  3 года назад

      E xem video này nhé ruclips.net/video/1NaA4j3URag/видео.html

  • @greenlyrics2932
    @greenlyrics2932 3 года назад

    cam on thay

  • @tuan89dnu
    @tuan89dnu 3 года назад +1

    Hay quá

    • @hocwebdilam
      @hocwebdilam  3 года назад +1

      Học đến đâu rồi em?

    • @tuan89dnu
      @tuan89dnu 3 года назад

      @@hocwebdilam thực hành xong phần này rồi anh

  • @hoavangcoxanh5965
    @hoavangcoxanh5965 2 года назад

    cho em hỏi cách viết css để có menu thứ cấp cho nó đồng bộ với cái header đó với Thầy. Em làm theo cách hướng dẫn của Thầy rồi, thấy rất đẹp và cảm giác web uyển chuyển, mềm mại hơn.

    • @hocwebdilam
      @hocwebdilam  2 года назад

      Nó đồng bộ thế nào em nhỉ? A chưa hiểu rõ ý lắm

  • @vuoanh5966
    @vuoanh5966 6 месяцев назад +2

    mọi người cho e hỏi là e tách ra một file js riêng
    và khi ấn $(windown). thì scroll không được gọi
    và scrollTop cũng không được gọi ạ
    e có chèn jquery vào thẻ html và cả file js vào r ạ

    • @hocwebdilam
      @hocwebdilam  6 месяцев назад

      Code import jquery em lưu ý nằm trên link import file js nhé.
      Nếu chưa đc em ib zalo 0988859692 gửi code mình check cho e nhé!

  • @MTKCHANNEL
    @MTKCHANNEL 3 года назад

    Cảm ơn anh.
    Anh có biết công ty nào đang tuyển internship 2 tháng ko ạ, về lĩnh vực lập trình website

    • @hocwebdilam
      @hocwebdilam  3 года назад

      E lên google search các trang tuyển dụng em nhé. Nhiều lắm.

  • @MinhNguyen-xu9qj
    @MinhNguyen-xu9qj 3 года назад +1

    Cho em hỏi là khi em scoll qua những phần tử em dùng position absolute thì những phần tử ấy nó sẽ bị nổi lên trên header có cách nào fix ko ạ

    • @hocwebdilam
      @hocwebdilam  3 года назад +2

      E cho z index nó cao hơn là ok em.

  • @TuDVH
    @TuDVH 3 года назад

    cho em hỏi: có cách nào khi kéo xuống một đoạn rồi nó mới sticky không vậy ạ? em cám ơn

    • @hocwebdilam
      @hocwebdilam  3 года назад

      Có em. E sử dụng jquery để tính toán khi scroll > độ cao mình thiết lập thì thêm class stiky cho nó.

  • @vuthan8365
    @vuthan8365 7 месяцев назад

    thầy ơi cho em hỏi, sao em trèn hình ảnh vào mà hình ảnh nó không hiện thị được hết, chỉ hiện 1 nửa bên trên, phải làm sao đây thầy

    • @truongmyhoa7454
      @truongmyhoa7454 7 месяцев назад

      Có thể là thẻ cha có kích thước nhỏ hơn hình á bạn

  • @nguyeexn3361
    @nguyeexn3361 2 месяца назад +1

    Anh cho em hỏi khúc script em muốn đổi màu của logo là ảnh từ trắng sang đen như dưới nhưng kh đc, kh biết là em sai ở đâu:
    $(window).scroll(function () {
    if ($(this).scrollTop()) {
    $('header').addClass('sticky')
    $('#logo-img').attr('src', '~/IMG/logowhite.png')(logo trắng)
    }
    else {
    $('header').removeClass('sticky')
    $('#logo-img').attr('src', '~/IMG/logo2.png'); (logo đen)
    }
    });
    })

    • @hocwebdilam
      @hocwebdilam  2 месяца назад +1

      Xem xem đường dẫn nhé. Có thể bị sai đường rồi dẫn
      $(window).scroll(function () {
      if ($(this).scrollTop()) {
      $('header').addClass('sticky');
      $('#logo-img').attr('src', '/IMG/logowhite.png'); // logo trắng
      } else {
      $('header').removeClass('sticky');
      $('#logo-img').attr('src', '/IMG/logo2.png'); // logo đen
      }
      });

  • @huanhoahoe8690
    @huanhoahoe8690 3 года назад

    lúc mình scoll qua các phần tử dùng position: relative thì các phần tử đấy che luôn hader đi có cách nào fix ko bạn,mình chỉnh cả z-index để cho nó nằm xuống nhưng cx chả đc mình thay banner bằng cái slider chuyển ảnh giờ muốn để hader lên slide carousel thì sao giờ bạn

    • @hocwebdilam
      @hocwebdilam  3 года назад

      THằng nào muốn nằm trên bạn set giá trị z-index cho nó cao hơn là được nhé.

    • @huanhoahoe8690
      @huanhoahoe8690 3 года назад +1

      @@hocwebdilam mình làm đc r thank bạn

  • @yeuchim2204
    @yeuchim2204 Год назад

    em code theo nhưng nó không cố định được ạ có phải sau 2 năm có sự thay đổi gì ko ạ

    • @hocwebdilam
      @hocwebdilam  Год назад

      Ko đâu em. Làm chạy ngon là cứ thế chạy ngoại trừ việc em gây xung đột js.

  • @dichvuseo
    @dichvuseo 2 года назад

    có cách nào vừa thể hiện header, vừa không làm che nội dung hiển thị đầu trên website không?

    • @hocwebdilam
      @hocwebdilam  2 года назад

      Em cho một khối phía dưới nó chiếm bằng không gian của header e nhé.

    • @dichvuseo
      @dichvuseo 2 года назад

      @@hocwebdilam trời cảm ơn anh. cơ mà tận 1 tháng a mới phản hồi.
      Em có câu hỏi mới cho anh đây: Tại một website bán các dịch vụ như "thống kê thứ hạng SEO" chẳng hạn. Họ tạo dựng đc dữ liệu riêng cho mỗi tài khoản khách hàng có thể xem. Vậy thì có plugin nào đáp ứng nhu cầu này không ạ?

  • @minhkhanhnguyen9123
    @minhkhanhnguyen9123 Год назад

    Anh cho e hỏi e có làm thêm phần background chuyển động nữa nhưng mà cái thanh header nó lại bị ẩn dưới ảnh background thì sao ạ 😢

    • @hocwebdilam
      @hocwebdilam  Год назад +1

      E dùng z-index để đẩy nó lên. E xem video này ruclips.net/video/e9TPneWsFLo/видео.html

    • @minhkhanhnguyen9123
      @minhkhanhnguyen9123 Год назад

      @@hocwebdilam dạ e sửa được lỗi r, e cám ơn anh.

    • @hocwebdilam
      @hocwebdilam  Год назад

      @@minhkhanhnguyen9123 nếu có mục tiêu học đi làm mời e xem qua lộ trình học 10 bước đi làm tại unitop. Chương trình có kèm cặp qua nhóm kín hỗ trợ hỏi đáp để đi làm e.

  • @daisy23-69
    @daisy23-69 3 года назад

    Cho em hỏi: khi em kéo thanh cuộn xuống rồi kéo lại ban đầu thì nó ko trở lại cái header ban đầu mà nó vẫn background trắng như khi kéo xuống vậy ạ? Em cảm ơn

    • @hocwebdilam
      @hocwebdilam  3 года назад +1

      Check từng bước xem có sai bước nào ko e?

    • @hieunguyenminh3290
      @hieunguyenminh3290 3 года назад

      bạn fix được chưa ?Mình cũngg bị

    • @hieunguyenminh3290
      @hieunguyenminh3290 3 года назад +1

      do bạn quên thêm đk else

    • @daisy23-69
      @daisy23-69 3 года назад +1

      @@hieunguyenminh3290 ừ đúng rồi ông, tks ông nhé, sau bữa tui hỏi tui fix rồi ông.

  • @MinhTranHong-p3s
    @MinhTranHong-p3s 8 месяцев назад

    ai cho em xin link ảnh với ạ :

  • @nghiale2880
    @nghiale2880 3 года назад +1

    A cho em xin sdt đc không ạ

    • @hocwebdilam
      @hocwebdilam  3 года назад

      E cần thông tin gì em vào unitop.vn nhé. Còn cần tư vấn trực tiếp em chat ở góc trái dưới cùng của web nha.

  • @minhkhang2975
    @minhkhang2975 3 года назад

    Thầy ơi cho em hỏi là, em không muốn thanh header ở yên trên đó nữa mà cuộn trang là sẽ mất nhưng ảnh bị đẩy xuống thì làm cách nào ạ. Có cách nào cho ảnh tràn lên header lun hong ạ. Em cảm ơn thầy.

    • @hocwebdilam
      @hocwebdilam  3 года назад

      Vẫn chưa hiểu câu hỏi của em lắm. Về các phần tử tràn lên nhau thì e sử dụng position kết hợp z index nhé