1. Hello Guest, selamat datang di Forum WinPoin. Kamu bisa bertanya, berdiskusi, sharing, dan ngobrolin apapun seputar Windows, Windows Phone, PC, Gadget, atau hal seputar Teknologi lainnya. Selamat berkomunitas! ;)

Memperbaiki Responsive Sticky Menu Blogspot

Discussion in 'Developer Corner' started by SyamsQ, Aug 10, 2014.

  1. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    :hai: Admin, Master, Moderator, saya menerapkan kode ini untuk membuat menu jadi melayang.
    Code:
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function() {
        // Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
        var stickyNavTop = $('#header-wrapper').offset().top; 
        var stickyNav = function(){
            var scrollTop = $(window).scrollTop();  
            // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
            if (scrollTop > stickyNavTop) { 
                $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
            } else {
                $('#header-wrapper').css({ 'position': 'relative' });
            }
        };
        // Jalankan fungsi
        stickyNav();
        $(window).scroll(function() {
            stickyNav();
        });
    });
    //]]>
    </script>
    Setelah kodenya saya taruh dengah hari-hati ternyata ada masalah menunya jadi rusak. :desperate2:
    Code:
    #menu-wrapper {
        height: 50px;
        width: 100%;
        position: relative;
    Normal
    [​IMG]
    Di Scroll jadi berantakan
    [​IMG]
    Mode Mobile, aman
    [​IMG]

    Saya coba edit sendiri, ternyata berpengaruh discroll, tapi diuji dengan mode mobile ternyata berantakan juga:nangis3:
    Code:
    #menu-wrapper {
        height: 50px;
        width: 670px;
        position: relative;
    Normal
    [​IMG]
    Scroll Aman
    [​IMG]
    Mode Mobile, Gagal
    [​IMG]

    Tolong Bantu, Gan. saya bingung :woa: supaya berhasil semua bagaimana?
     
  2. Yusril Ibnu

    Yusril Ibnu Winpoin Staff Staff Member

    Joined:
    May 12, 2014
    Messages:
    6,349
    harus ditambahkan css lagi agar fix.... namun css nya berada pada js
    Code:
     $('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
    
    itu yang harus diubah....
    untuk pengubahan ntar saya coba...
     
  3. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    Tolong ya, gan.
     
  4. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    Gan, ini saya rubah dulu jadi 100% atau 670px?
     
  5. SyamsQ

    SyamsQ Member

    Joined:
    Apr 16, 2014
    Messages:
    585
    :kagum: :sabarmenunggu:
     
  6. Ambrizal Suryadinata

    Ambrizal Suryadinata External Team Staff Member

    Joined:
    Jan 25, 2014
    Messages:
    2,580
    pernah liat ini struktur javascriptnya.
     

Share This Page