Menu schodzące w dół razem z przewijaniem strony

Odpowiedz Nowy wątek
2019-02-11 14:50
0

WItam,
Mam taki kod:


<section class="indexTop">
        <div class="container">
            <div class="row indexTopPadding">
                <div class="col-xs-8 col-sm-12 col-md-12 col-lg-11 ">
                    <div class="topData">Poniedziałek, 11 października 2019</div>
                </div>
                <div class="col-xs-4 col-sm-12 col-md-12 col-lg-1">
                    <div class="topKontrast">
                        <a href="#"><img src="images/ikon2.png" class="img-responsive topIkonLeft topIkonLeft5"></a>
                        <a href="#"><img src="images/ikon1.png" class="img-responsive topIkonLeft topIkonLeft5"></a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 visible-xs">
                    <div class="topSocialMedia">
                        <a href="#"><img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
                        <a href="#"><img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
                        <a href="#"><img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
                        <a href="#"><img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
                        <a href="#"><img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10 ikonSocialMediaR"></a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 topMargin30R ">
                    <div class="logo">
                        <a href="#"><img src="images/logo.png" class="img-responsive ikonCenterR"></a>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-4 topMargin10 hidden-xs">
                    <form method="post" name="contactformXX" class="form validate clearfix validate-form">
                        <div class="form-group ">
                            <div class="form-group has-feedback ">
                                <input type="text" class="form-control indexInputSzukaj" id="inputValidation" placeholder="Znajdź" /> <span class="glyphicon glyphicon-search form-control-feedback glyphiconColor"></span> </div>
                        </div>
                    </form>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 topMargin15 hidden-xs">
                    <div class="topSocialMedia">
                        <a href="#"><img src="images/ikon7.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
                        <a href="#"><img src="images/ikon3.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
                        <a href="#"><img src="images/ikon4.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
                        <a href="#"><img src="images/ikon5.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
                        <a href="#"><img src="images/ikon6.png" class="img-responsive topIkonLeft topIkonLeft10"></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--    END TOP-->
    <!--    MENU-->
    <div class="paddingMenuTop"></div>
    <nav class="navbar navbar-default  navbarDefaultMop ">
        <div class="container">
            <!-- navbar-fixed-top -->
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand  visible-xs" href="#">MegaMenu</a></div>
            <div class="collapse navbar-collapse js-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="dropdown mega-dropdown menuMop"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Item xxx1</a>
                        <ul class="dropdown-menu mega-dropdown-menu row dropdownMenuMop">
                            <div class="container topMenuColor">
                                <li class="col-sm-3">
                                    <ul class="hideBullet">
                                        <li class="dropdown-header hideBullet">Sprawy  </li>
                                        <li><a href="#" class="formattopMenuItems">pozycja 1</a></li>
                                        <li><a href="#" class="formattopMenuItems">pozycja 2</a></li>
                                        <li><a href="#" class="formattopMenuItems">pozycja 3</a></li>
                                        <li><a href="#" class="formattopMenuItems">pozycja 4</a></li>
                                        <li><a href="#" class="formattopMenuItems">pozycja 5</a></li>
                                        <li class="dividerMop"></li>
                                        <li class="dropdown-header hideBullet">pozycje 5</li>
                                        <li><a href="#" class="formattopMenuItems">Bezpłatana imnformaja</a></li>
                                        <li><a href="#" class="formattopMenuItems">dream</a></li>
                                        <li><a href="#" class="formattopMenuItems">Callendar</a></li>
                                        <li><a href="#" class="formattopMenuItems">Archiwum Mewspow</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul class="hideBullet">
                                        <li class="dropdown-header hideBullet">My life </li>
                                        <li><a href="#" class="formattopMenuItems">Health</a></li>
                                        <li><a href="#" class="formattopMenuItems">Bicycles</a></li>
                                        <li><a href="#" class="formattopMenuItems">Cars</a></li>
                                        <li><a href="#" class="formattopMenuItems">Education</a></li>
                                        <li><a href="#" class="formattopMenuItems">Cash</a></li>
                                        <li class="dividerMop"></li>
                                        <li class="dropdown-header hideBullet">Fundation</li>
                                        <li><a href="#" class="formattopMenuItems">xdcsdcsd cdscdscds</a></li>
                                        <li><a href="#" class="formattopMenuItems">Magazine</a></li>
                                        <li><a href="#" class="formattopMenuItems">Items</a></li>
                                        <li><a href="#" class="formattopMenuItems">Items2</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul class="hideBullet">
                                        <li class="dropdown-header hideBullet">My life </li>
                                        <li><a href="#" class="formattopMenuItems">Health</a></li>
                                        <li><a href="#" class="formattopMenuItems">Bicycles</a></li>
                                        <li><a href="#" class="formattopMenuItems">Cars</a></li>
                                        <li><a href="#" class="formattopMenuItems">Education</a></li>
                                        <li><a href="#" class="formattopMenuItems">Cash</a></li>
                                        <li class="dividerMop"></li>
                                        <li class="dropdown-header hideBullet">Fundation</li>
                                        <li><a href="#" class="formattopMenuItems">xdcsdcsd cdscdscds</a></li>
                                        <li><a href="#" class="formattopMenuItems">Magazine</a></li>
                                        <li><a href="#" class="formattopMenuItems">Items</a></li>
                                        <li><a href="#" class="formattopMenuItems">Items2</a></li>
                                    </ul>
                                </li>
                                <li class="col-sm-3">
                                    <ul>
                                        <li class="dropdown-header">Accessories</li>
                                        <li><a href="#">Default Navbar</a></li>
                                        <li><a href="#">Lovely Fonts</a></li>
                                        <li><a href="#">Responsive Dropdown </a></li>
                                        <li class="dividerMop"></li>
                                        <li class="dropdown-header">Newsletter</li>
                                        <form class="form" role="form">
                                            <div class="form-group">
                                                <label class="sr-only" for="email">Email address</label>
                                                <input type="email" class="form-control" id="email" placeholder="Enter email"> </div>
                                            <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                        </form>
                                        <li class="dropdown-header">zamknij mnie2
                                            <button type="button" class="close">&times;</button>
                                        </li>
                                    </ul>
                                </li>
                            </div>
                        </ul>
                    </li>

                </ul>
            </div>
            <!-- /.nav-collapse -->
        </div>
    </nav>

.navbar-default .navbar-nav>li>a {
    width: auto;
    /*    width: 200px;*/
    /*    font-weight: bold;*/
}

.mega-dropdown {
    position: static !important;
    /*    width: 100%;*/
}

.mega-dropdown-menu {
    padding: 0px;
    width: 100%;
    box-shadow: none;
    -webkit-box-shadow: none;
}

.mega-dropdown-menu > li > ul {
    padding: 0;
    margin: 0;
}

.mega-dropdown-menu > li > ul > li {
    list-style: none;
}

.mega-dropdown-menu > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 300;
    line-height: 1.428571429;
    color: #243C78;
    white-space: normal;
}

.mega-dropdown-menu .dropdown-header {
    color: #243C78;
    font-size: 18px;
    font-weight: 500;
}

.mega-dropdown-menu form {
    margin: 3px 20px;
}

.mega-dropdown-menu .form-group {
    margin-bottom: 3px;
}

Chciałbym żeby menu górne w momencie przewijania w dół (gdy przeglądarka dojdzie na wysokość menu) - "przykleiło się do góry".
Efefekt jaki chciałbym uzyskać: https://www.gdynia.pl
menu: Dla mieszkańców, aktualności, dla turystów, o Gdyni,

Jak dostosować mój kod żeby to zadziałało w powyższy sposób?
Podgląd mojej strony: http://serwer1356363.home.pl/pub/menu_fixed/

Pozostało 580 znaków

2019-02-11 16:11
1

Jak zbadasz jak oni to mają zrobione to po prostu zmieniają jsem klasę z affix-top na affix:

.affix {
    top: 0;
    z-index: 999999;
    margin-top: 0;
    width: 100%;
    position: fixed;

Kompletny przykład masz tutaj http://jsfiddle.net/adamb/F4BmP/
z tego wątku: https://stackoverflow.com/que[...]ar-fixed-on-top-when-scrolled


Kto nigdy nie zrobił var dupa niech pierwszy rzuci kamień.

Pozostało 580 znaków

2019-02-11 16:38
0
karpov napisał(a):

Jak zbadasz jak oni to mają zrobione to po prostu zmieniają jsem klasę z affix-top na affix:

.affix {
    top: 0;
    z-index: 999999;
    margin-top: 0;
    width: 100%;
    position: fixed;

Kompletny przykład masz tutaj http://jsfiddle.net/adamb/F4BmP/
z tego wątku: https://stackoverflow.com/que[...]ar-fixed-on-top-when-scrolled

dzięki :)
tylko co w przypadku responsywności (kiedy nagłówek będzie miał większą wysokość)?

Pozostało 580 znaków

2019-02-11 18:42
0

Możesz to zrobić bez js:
position: sticky;
https://www.w3schools.com/css[...]lename=trycss_position_sticky


Pozostało 580 znaków

2019-02-11 20:15
0
baracadus napisał(a):

tylko co w przypadku responsywności (kiedy nagłówek będzie miał większą wysokość)?

Musisz to sobie wszystko dostosować :) Nie do końca wiem co masz na myśli?


Kto nigdy nie zrobił var dupa niech pierwszy rzuci kamień.

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0