app/template/default/Block/bottom_fixed_navi_sp.twig line 1

Open in your IDE?
  1. {% block stylesheet %}
  2. <style>
  3. .bottom-fixed__navi{
  4.   position: fixed;
  5.   left: 0;
  6.   bottom: 0;
  7.   background: #fff;
  8.   width: 100%;
  9.   z-index: 45;
  10.   display: none;
  11. }
  12. .bottom-fixed__navi ul{
  13.     border-top: 1px solid #dd6487;
  14. }
  15. .bottom-fixed__navi li{
  16.     width: 50%;
  17. }
  18. .bottom-fixed__navi li:nth-of-type(1){
  19.     border-right: 1px solid #dd6487;
  20. }
  21. .bottom-fixed__navi li a{
  22.     width: 100%;
  23.     height: 100%;
  24.     border: none;
  25.     display: flex;
  26.     flex-wrap: wrap;
  27.     justify-content: center;
  28.     align-items: center;
  29.     transition: all .5s ease;
  30. }
  31. .bottom-fixed__navi li a:hover{
  32.     opacity: .7;
  33.   transition: all .5s ease;
  34. }
  35. .bottom-fixed__navi .contact-tel a img,
  36. .bottom-fixed__navi .contact-mail a img {
  37.   margin-left: 0;
  38.   margin-right: 5px;
  39. }
  40. .business-hour{
  41.   display: block;
  42.   width: 100%;
  43.   text-align: center;
  44.   font-size: 12px;
  45.   margin-top: 5px;
  46. }
  47. .ec-blockTopBtn{
  48.     bottom: 60px;
  49. }
  50. .bottom-fixed .ec-footerRole{
  51.     padding-bottom: 55px;
  52. }
  53. @media only screen and (min-width: 880px){
  54.     .bottom-fixed__navi{
  55.         display: none;
  56.     }
  57.     .ec-blockTopBtn{
  58.         bottom: 20px;
  59.     }
  60.     .bottom-fixed .ec-footerRole{
  61.         padding-bottom: 0;
  62.     }
  63. }
  64. </style>
  65. {% endblock %}
  66. {% block javascript %}
  67. <script>
  68.     $(function() {
  69.         var $body = $('body');
  70.         var $window = $(window);
  71.         $window.on('scroll', function() {
  72.             if ($window.width() < 880) {
  73.                 if($(this).scrollTop() > 30) { 
  74.                     $(".bottom-fixed__navi").fadeIn();
  75.                     if (!$body.hasClass('bottom-fixed')) {
  76.                         $body.addClass('bottom-fixed');
  77.                     }
  78.                 } else {
  79.                     $(".bottom-fixed__navi").fadeOut();
  80.                     if ($body.hasClass('bottom-fixed')) {
  81.                         $body.removeClass('bottom-fixed');
  82.                     }
  83.                 }
  84.             }
  85.         });
  86.         $window.on('load resize', function() {
  87.             if ($window.width() >= 880) {
  88.                 $(".bottom-fixed__navi").fadeOut();
  89.                 if ($body.hasClass('bottom-fixed')) {
  90.                     $body.removeClass('bottom-fixed');
  91.                 }
  92.             }
  93.         });
  94.     });
  95. </script>
  96. {% endblock javascript %}
  97. <div class="bottom-fixed__navi">
  98.     <div class="bottom-fixed__navi__inner">
  99.         <ul class="flex">
  100.             <li class="contact-mail"><a href="{{ url('contact') }}" ><img src="{{ asset('assets/img/icon/icon_mail_red.png', 'user_data') }}" alt="メールフォームへ" />お問い合わせ</a></li>
  101.             <li class="contact-tel"><a href="tel:0758419278" ><img src="{{ asset('assets/img/icon/icon_tel_red.png', 'user_data') }}" alt="電話番号" />075-841-9278<span class="business-hour">(平日9:00〜17:00)</span></a></li>
  102.         </ul>
  103.     </div>    
  104. </div>