JQuery липкий нижний колонтитул - PullRequest
Новая
       28

JQuery липкий нижний колонтитул

1 голос
/ 26 марта 2012

Джеймс здесь! Я около двух часов пытаюсь получить липкий нижний колонтитул, но я, кажется, продолжаю портить CSS. Я ищу сценарий, который может обрабатывать jQuery. Я понимаю, как работает большинство сценариев (что удивительно, поскольку я только учусь), но мне нужно, чтобы скрипт работал независимо от высоты нижнего колонтитула, поскольку в нем не установлена ​​динамическая высота CSS файл моей страницы. Кто-нибудь сможет предоставить рабочий скрипт для липкого нижнего колонтитула? Я хочу, чтобы сам нижний колонтитул всегда был внизу страниц, НО НЕ ФИКСИРОВАННАЯ ПОЗИЦИЯ. Элемент содержимого - #posts, а область нижнего колонтитула - это элемент с идентификатором #bottom. Вот пример страницы: Постоянная ссылка JTB

Ответы [ 6 ]

2 голосов
/ 01 июня 2014

Я просто оставлю это здесь 

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery Sticky footer</title>
    <!-- include jQuery -->
    <script src="jquery-2.1.0.min.js"></script>
    <!-- include our scripts -->
    <script type="text/javascript">
      $(function () {
        // sticky footer
        (function () {
          var
            $window = $(window),
            $body   = $(document.body),
            $footer = $("#footer"),
            condition = false,
            resizing  = false,
            interval  = 500
            ;

          function positionFooter() {
            if (resizing) {
              setTimeout(function(){
                if(resizing == false) {
                  positionFooter();
                }
              }, interval);
              return true;
            }
            var
              footer_position = $footer.css('position'),
              body_height   = $body.height(),
              window_height = $window.height(),
              footer_height = $footer.outerHeight();

            if (footer_position == 'absolute') {
              condition = body_height + footer_height < window_height
            }
            else {
              condition = body_height < window_height
            }

            if (condition) {
              $footer.css('position', 'absolute').css('bottom', 0);
            }
            else {
              $footer.css('position', 'relative');
            }

            resizing = setTimeout(function () {
              resizing = false;
            }, interval);

            return true;
          }

          $window.bind("load", function () {
            positionFooter()
          });

          $window.resize(positionFooter);

        }());
      });
    </script>

    <style>
      body {
        text-align: center;
      }

      #header {
        width: 100%;
        background-color: green;
        color: white;
        height: 100px;
      }

      #footer {
        width: 100%;
        background-color: blue;
        color: white;
      }
    </style>
  </head>

  <body>
    <header id='header'>
      Header content
    </header>
    <div id='content'>
      Content is here!
    </div>
    <footer id='footer'>
      Sticky footer content
    </footer>
  </body>
</html>
1 голос
/ 27 марта 2012

Хорошо. HTML: 

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

CSS: 

#container {
    min-height: 100%;
    position: relative;
    width: 100%;
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 206px; /* footer height, we will fix that with jquery */
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0px;
    height: 206px; /* footer height if any */
}

JQuery: 

$(document).ready(function(){
    var footer_height=$("#footer").height();
    $("#wrapper").css({
        'padding-bottom' : footer_height
    });
});

Я должен предупредить вас, что функция jquery .height () может работать некорректно, поэтому будьте осторожны с отступами и полями (просто добавьте значения полей / отступов в 'footer_height', и все будет в порядке).

0 голосов
/ 15 декабря 2017

Я знаю, что уже слишком поздно отвечать на этот вопрос, но мне тоже было трудно, и я нашел что-то в этом замечательном месте, и я прошел через этот вопрос, и я хотел бы поделиться одним кодом, который мне очень помог.

Вы можете найти его в демоверсии ниже.

Я надеюсь, что это может кому-то помочь, так как я всегда получал помощь от других людей здесь.

Спасибо, Stackoverflow. 

$(document).ready(function(){
$(window).on("scroll", function() {
		var footer_height = $( "#footer" ).outerHeight();
		var dim_height = $(".dim").outerHeight();
		var scrollHeight = $(document).height();
		var scrollPosition = $(window).height() + $(window).scrollTop();
		if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
			// when scroll to bottom of the page
			$(".dim").removeClass("dim-fixed");
			$(".dim").addClass("dim-static").css({
			'bottom': footer_height,
			});

		}else{
			$(".dim").removeClass("dim-static");
			$(".dim").addClass("dim-fixed").css({'bottom': 0,});
		}
});

}); //Document Ready function end
body {
    margin: 0px auto;
    background: #ffffff;
    font-size: 14px;
    color: #444444;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}
.point1 {
    width: 100%;
    margin: 0 auto;
}
.clearfix:before, .clearfix:after {
    display: table;
    content: " ";    
    }
#footer {
    z-index: 104;
    display: block;
}

footer.page-footer {
    width: 100%;
    background: #333333;
    color: #fff;
    border-top: 2px white solid;
    position: absolute;
    left: 0;
    }

footer.page-footer > div {
    padding: 30px 0 40px;
    min-height: 162px;
    margin: 0 auto;
    position: relative;
}
nav.footer-menu {
    position: relative;
    float: left;
    width: 75%;
    padding-right: 30px;
    display: block;
}

nav.footer-menu > ul {
    margin-top: -3px;
}
body:not([class*="static-page"]) ul, body:not([class*="static-page"]) li {
    list-style: none;
}
nav.footer-menu > ul > li {
    display: inline-block;
    width: 33.33%;
    margin: 0;
    padding: 0;
    border: 0;
}
nav.footer-menu a {
    text-decoration: none;
    color:#fefefe;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    font-size: 1.071em;
    padding: 0 10px 8px;
    vertical-align: top;
    display: inline-block;
}

.footer-data {
    font-size: 0.929em;
    color: #a0a0a0;
    overflow: hidden;
}

/* footer extra menu container*/
.dim-static  {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;}
  
  .dim-fixed {
	position: fixed;
	margin-left: auto;
	margin-right: auto;
	background: #ddd; */
	left: 0;
	right: 0;
	width: 100%;
	text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
<section>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>
<div>DEMO CONTENT </div>

</section>
<div class="dim"> Full width Footer menu </div>
<footer class="page-footer" id="footer">
  <div class="point1 clearfix">
    <nav class="footer-menu">
      <ul>
        <li><a class="active" title="stackoverflow.com" href="#">Home</a></li>
        <li><a rel="nofollow" title="Add a New Listing" href="#add-listing.html">Add a Listing</a></li>
        <li><a title="Search for property" href="#search.html">Search</a></li>
        <li><a rel="nofollow" title="About Us" href="#about-us.html">About Us</a></li>
        <li><a title="Contact us" href="#contact-us.html">Contact Us</a></li>
        <li><a title="My Favorites List" href="#my-favorites.html">Favorites</a></li>
        <li><a title="Terms of use" href="#terms-of-use.html">Terms of Use</a></li>
        <li><a title="Privacy Policy" href="#privacy-policy.html">Privacy Policy</a></li>
        <li><a title="FAQs" href="#faqs.html">FAQs</a></li><li><a title="Refund Policy" href="#refund-policy.html">Refund Policy</a></li>
      </ul>
    </nav>
    <div class="footer-data">
      <div class="icons">
        <a class="rss" title="Subscribe to RSS-feed" href="#" target="_blank"></a>
        <a class="facebook" target="_blank" title="Join us on Facebook" href="#"></a>
        <a class="twitter" target="_blank" title="Join us on Twitter" href="#"></a>
      </div>

      <div>
        © 2017, powered by <a title="stackoverflow.com" href="http://stackoverflow.com/">stackoverflow.com</a>
      </div>
    </div>
  </div>
</footer>
</body>

Также здесь, jsfiddle

В обеих демо-версиях меню «Нижний колонтитул» должно стоять только над нижним колонтитулом, с автоматической динамической высотой, по некоторым причинам, оно не показывается в демоверсии стенда, но если вы посмотрите журнал, вы поймете, о чем я говорю, и его 100% нормально работает на моих сайтах.

С этим можно многое сделать, возможно, вы добавите дополнительное меню нижнего колонтитула или просто конвертируете нижний колонтитул в фиксированный / статический в соответствии с состоянием прокрутки документа, а также вы можете поиграть, и у вас просто будет статический / исправлено меню очень хорошим способом.

Я надеюсь, что это поможет кому-то еще, потому что я всегда получал помощь отсюда. Еще раз спасибо всем.

Тарик

0 голосов
/ 04 мая 2015

JQuery 

function getWndowSize()
{
    var windows_height=$(windows).height();
    var current_height=windows_height-100;/*change values of 100 how much u need based on your requirement*/
    $("#wrapper").css({'min-Height' : current_height});
}

Код: 

<body onload="getWndowSize()">

<div id="container">
    <div id="wrapper">
        <!-- CONTENT GOES HERE -->
    </div>
    <div id="footer">
        <!-- FOOTER GOES HERE -->
    </div>
</div>

Просто попробуйте. Потому что он отлично работает на моей странице.

0 голосов
/ 27 марта 2012

Если я правильно вас понимаю, jQuery не нужен.Простые и простые ...

http://www.cssstickyfooter.com/

0 голосов
/ 27 марта 2012

Я только что создал страницу с липким нижним колонтитулом ...

При этом создается страница с верхним и нижним колонтитулом по 55 пикселей каждая, а нижний колонтитул придерживается самого нижнего края окна браузера

вот что я в итоге сделал:

HTML: 

<!--main header container-->
<div id="header" class="ui-frame ui-frame-header"></div>

<!--main container for app-->
<div id="content" class="ui-mainContent">
    This is a place holder for my content
</div>

<!--//main footer container-->
<div id="footer" class="ui-frame ui-frame-footer"></div>

CSS: 

.ui-frame {
    width: 100%;
    height: 55px;
    background: #000000;
    font-family: Segoe UI, Arial, sans-serif;
    color: #ffffff;
    text-align: right;
    vertical-align: middle;
    font-size: 16px;
}

.ui-frame-header {
   position: absolute;
   top: 0;
}

.ui-mainContent {
    position: absolute;
    top: 55px;
    bottom: 55px;
    background: #ffffff;
    font-family: Segoe UI, Arial, sans-serif;
}

.ui-frame-footer {
    position: absolute;
    bottom: 0
}
...