Create Both fixed and footer position for floating footer bar

Hi!

I am trying to create custom css code that will enable the visibility of both a “fixed” and “footer” position for my floating footer bar. I would like for the footer to remain at the fixed position on the home page, but be in the footer position for all other pages, on my website. The page id for the home page is .page-id-196 I’m sure it’s possible and I have been racking my brain trying to figure it out. Please help. :/ The code is below.This particular site is not live yet, but the footer can be view on my other website https://celebrityscope.net

/*ShopAtKEI Footer Bar*/
.fixedBar{background: #000000; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:fixed; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 1; font-weight: bold;}
 
	.boxfloat{text-align:center; width:920px; margin:0 auto}
	 
	#tips, #tips li{margin:0; padding:0; list-style:none}
	 
	#tips{width:920px; font-size:20px; line-height:120%;}
	 
	#tips li{padding: 15px 0;}
	 
	#tips li a{color: #fff;}
	 
	#tips li a:hover{text-decoration: none;}